CSS3中的变形功能-transform功能

最新推荐文章于 2024-04-27 17:15:07 发布
最新推荐文章于 2024-04-27 17:15:07 发布
阅读量4k 收藏 51
点赞数 7
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z983002710/article/details/76391255
版权

CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。

1、如何使用transform功能：

（1）在CSS3中通过transform属性来实现transform功能：

（2）transform功能使用方法：
transform:功能;
-ms-transform:功能;/*IE9*/   
-moz-transform:功能;/*Firefox*/
-webkit-transform:功能;/*Safari和chrome*/
-o-transform:功能;/*Opera*/

2、rotate旋转，在参数中规定角度（rotate表示的是顺时针旋转，deg是CSS3中的角度单位）：

（1）使用方法：
-ms-transform:rotate(角度);/*IE9*/   
-moz-transform:rotate(角度);/*Firefox*/
-webkit-transform:rotate(角度);/*Safari和chrome*/
-o-transform:rotate(角度);/*Opera*/

（2）rotate旋转的应用：

1）HTML代码：

<div></div>

2）CSS代码：

div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	-ms-transform:rotate(45deg);/*IE9*/   
	-moz-transform:rotate(45deg);/*Firefox*/
	-webkit-transform:rotate(45deg);/*Safari和chrome*/
	-o-transform:rotate(45deg);/*Opera*/
}

3）效果图如下：


3、scale缩放转换：

（1）使用方法：transform:scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放50%，1就是缩放100%，1.5就是缩放150%；

-ms-transform:scale(值);/*IE9*/   
-moz-transform:scale(值);/*Firefox*/
-webkit-transform:scale(值);/*Safari和chrome*/
-o-transform:scale(值);/*Opera*/

（2）可能的值：
1）scale(x,y)使元素X轴和Y轴同时缩放；
2）scale(x)使元素仅X轴缩放；
3）scale(y)使元素仅Y轴缩放；

（3）scale缩放转换的应用：

1）HTML代码：

<div></div>

2）CSS代码：

div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	/*缩放值X与Y为正整数时*/
	-ms-transform:scale(2,2);/*IE9*/   
	-moz-transform:scale(2,2);/*Firefox*/
	-webkit-transform:scale(2,2);/*Safari和chrome*/
	-o-transform:scale(2,2);/*Opera*/
	
	/*缩放值X与Y均为小于1的浮点数时*/
	/*-ms-transform:scale(0.5,0.5);*//*IE9*/   
	/*-moz-transform:scale(0.5,0.5);*//*Firefox*/
	/*-webkit-transform:scale(0.5,0.5);*//*Safari和chrome*/
	/*-o-transform:scale(0.5,0.5);*//*Opera*/
	
	/*缩放值仅X为小于1的浮点数时*/
	/*-ms-transform:scaleX(0.5);*//*IE9*/   
	/*-moz-transform:scaleX(0.5);*//*Firefox*/
	/*-webkit-transform:scaleX(0.5);*//*Safari和chrome*/
	/*-o-transform:scaleX(0.5);*//*Opera*/
	
	/*缩放值仅Y为小于1的浮点数时*/
	/*-ms-transform:scaleY(0.5);*//*IE9*/   
	/*-moz-transform:scaleY(0.5);*//*Firefox*/
	/*-webkit-transform:scaleY(0.5);*//*Safari和chrome*/
	/*-o-transform:scaleY(0.5);*//*Opera*/
}

3）效果图如下：

①未缩放时的效果图：


②缩放值X与Y为正整数时的效果图：


③缩放值X与Y均为小于1的浮点数时的效果图：


④缩放值仅X为小于1的浮点数时的效果图：


⑤缩放值仅Y为小于1的浮点数时的效果图：


4、倾斜skew：

（1）使用方法：

transform:skew(角度);它的值是角度；
-ms-transform:skew(角度);/*IE9*/   
-moz-transform:skew(角度);/*Firefox*/
-webkit-transform:skew(角度);/*Safari和chrome*/
-o-transform:skew(角度);/*Opera*/

（2）可能的值：
1）skew(x,y)使元素在水平方向和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)只有一个参数的时候，只在水平方向上倾斜；
2）skewX(x)仅使元素在水平方向上扭曲变形(X轴扭曲变形)
3）skewY(y)仅使元素在垂直方向上扭曲变形(Y轴扭曲变形)

（3）倾斜skew的应用：

1）HTML代码：

<div></div>

2）CSS代码：

div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	
	/*X轴与Y轴均倾斜*/
	-ms-transform:skew(30deg,30deg);  
	-moz-transform:skew(30deg,30deg);
	-webkit-transform:skew(30deg,30deg);
	-o-transform:skew(30deg,30deg);
	
	/*设置一个值相当于仅X轴倾斜*/
	/*-ms-transform:skew(30deg);*//*IE9*/   
	/*-moz-transform:skew(30deg);*//*Firefox*/
	/*-webkit-transform:skew(30deg);*//*Safari和chrome*/
	/*-o-transform:skew(30deg);*//*Opera*/
	
	/*仅X轴倾斜*/
	/*-ms-transform:skewX(30deg);*//*IE9*/   
	/*-moz-transform:skewX(30deg);*//*Firefox*/
	/*-webkit-transform:skewX(30deg);*//*Safari和chrome*/
	/*-o-transform:skewX(30deg);*//*Opera*/
	
	/*仅Y轴倾斜*/
	/*-ms-transform:skewY(30deg);*//*IE9*/   
	/*-moz-transform:skewY(30deg);*//*Firefox*/
	/*-webkit-transform:skewY(30deg);*//*Safari和chrome*/
	/*-o-transform:skewY(30deg);*//*Opera*/
}

3）效果图如下：

①未倾斜的效果图：


②X轴与Y轴均倾斜的效果图：


③设置一个值相当于仅X轴倾斜的效果图：


④仅X轴倾斜的效果图：


⑤仅Y轴倾斜的效果图：


5、移动translate：

（1）使用方法：

transform:translate(值);它的值是指定移动的距离；
-ms-transform:translate(值);/*IE9*/   
-moz-transform:translate(值);/*Firefox*/
-webkit-transform:translate(值);/*Safari和chrome*/
-o-transform:translate(值);/*Opera*/

（2）可能的值：
1）translate(x,y)水平方向与垂直方向同时移动(也就是X轴和Y轴同时移动)只有一个参数的时候，只在水平方向上移动；
2）translateX(x)仅水平方向(X轴移动)
3）translateY(y)仅垂直方向(Y轴移动)

（3）移动translate的应用：

1）HTML代码：

<div class="main">
	<div class="div"></div>
</div>

2）CSS代码：

.main{
	width: 100%;
	height: 500px;
	background-color: lightcoral;
}
.div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	
	/*在X轴与Y轴上均移动*/
	-ms-transform:translate(50px,50px);/*IE9*/   
	-moz-transform:translate(50px,50px);/*Firefox*/
	-webkit-transform:translate(50px,50px);/*Safari和chrome*/
	-o-transform:translate(50px,50px);/*Opera*/
	
	/*设置一个值相当于仅在X轴上移动*/
	/*-ms-transform:translate(50px);*//*IE9*/   
	/*-moz-transform:translate(50px);*//*Firefox*/
	/*-webkit-transform:translate(50px);*//*Safari和chrome*/
	/*-o-transform:translate(50px);*//*Opera*/
	
	/*仅在X轴上移动*/
	/*-ms-transform:translateX(50px);*//*IE9*/   
	/*-moz-transform:translateX(50px);*//*Firefox*/
	/*-webkit-transform:translateX(50px);*//*Safari和chrome*/
	/*-o-transform:translateX(50px);*//*Opera*/
	
	/*仅在Y轴上移动*/
	/*-ms-transform:translateY(50px);*//*IE9*/   
	/*-moz-transform:translateY(50px);*//*Firefox*/
	/*-webkit-transform:translateY(50px);*//*Safari和chrome*/
	/*-o-transform:translateY(50px);*//*Opera*/
}

3）效果图如下：

①未移动的效果图：


②在X轴与Y轴上均移动时的效果图：


③设置一个值相当于仅在X轴上移动时的效果图：


④仅在X轴上移动时的效果图：


⑤仅在Y轴上移动时的效果图：


6、对一个元素使用多种变形方法：(同样的方法只能使用一次)

（1）使用方法：

transform:方法1 方法2 方法3 方法4;
-ms-transform:方法1 方法2 方法3 方法4;/*IE9*/   
-moz-transform:方法1 方法2 方法3 方法4;/*Firefox*/
-webkit-transform:方法1 方法2 方法3 方法4;/*Safari和chrome*/
-o-transform:方法1 方法2 方法3 方法4;/*Opera*/

（2）对一个元素使用多种变形方法的应用：

1）HTML代码：

<div class="main">
	<div class="div"></div>
</div>

2）CSS代码：

.main{
	width: 100%;
	height: 500px;
	background-color: lightcoral;
}
.div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	-ms-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*IE9*/   
	-moz-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Firefox*/
	-webkit-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Safari和chrome*/
	-o-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Opera*/
}

3）效果图如下：

①未添加方法时的效果图：


②添加了多种方法时的效果图：


7、改变元素基点transform-origin：

（1）可能的值：

top lefttopright top
leftcenterright
bottom leftbottombottom right

（2）默认情况下transform属性变化的基点是center，但是可以通过transform-origin改变transform属性变化的基点；

（3）改变元素基点transform-origin的应用：

1）HTML代码：

<div class="main">
	<div class="div"></div>
</div>

2）CSS代码：

.main{
	width: 100%;
	height: 500px;
	background-color: lightcoral;
	margin-left: 140px;
	margin-top: 180px;
}
.div{
	width: 300px;
	height: 300px;
	background-color: lightblue;
	-ms-transform:rotate(30deg);/*IE9*/   
	-moz-transform:rotate(30deg);/*Firefox*/
	-webkit-transform:rotate(30deg);/*Safari和chrome*/
	-o-transform:rotate(30deg);/*Opera*/
	
	transform-origin: center;
	/*transform-origin: top;*/
	/*transform-origin: top left;*/
	/*transform-origin: right top;*/
	/*transform-origin: left;*/
	/*transform-origin: right;*/
	/*transform-origin: bottom left;*/
	/*transform-origin: bottom;*/
	/*transform-origin: bottom right;*/	
}

3）效果图如下：

①未添加变形功能的效果图：


②添加旋转功能的效果图：


③以center为基点旋转的效果图：


④以top为基点旋转的效果图：


⑤以top left为基点旋转的效果图：


⑥以right top为基点旋转的效果图：


⑦以left为基点旋转的效果图：


⑧以right为基点旋转的效果图：


⑨以bottom left为基点旋转的效果图：


⑩以bottom为基点旋转的效果图：


⑪以bottom right为基点旋转的效果图：


Z_ikCoffee
关注
  • 7
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
浅谈CSS3中的变形功能-transform功能
09-24
主要介绍了浅谈CSS3中的变形功能-transform功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS中变形效果-transform（平移、旋转、缩放、倾斜）
shao_xuan_的博客
10-20 1万+
CSS中变形效果-transform（平移、旋转、缩放、倾斜）CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放）兼容性 CSS3实现变形的优势 1、无需加载额外的文
CSS3中的transform变形
weixin_30367169的博客
10-16 452
　　在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。 　　目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 　...
CSS动画中的 transform 之 scale（缩放）
wcxrib的博客
01-31 1235
分别对元素在X轴或Y轴上执行缩放操作，如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。
CSS 变形(CSS3) transform
热门推荐
快乐de馒头
01-20 4万+
一、2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》 1、移动 translate(x, y) tr...
CSS变形transform
橘猫吃不胖的博客
11-07 1161
CSS变形1 认识transform2 2D转换2.1 transform用法2.2 变形函数transform-function2.2.1 matrix()定义矩形变换2.2.2 translate()移动元素对象2.2.3 scale()缩放元素对象2.2.4 rotate()旋转元素对象2.2.5 skew()倾斜元素对象2.3 transform-origin中心点3 3D转换3.1 rotateX()指定元素围绕X轴旋转3.2 rotateY()指定元素围绕Y轴旋转 1 认识transform 2
CSS变形
JerryQuery的博客
12-30 2163
变形介绍： CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。 坐标系： x轴的正值在右侧，负值在左侧。y轴的正值沿纵轴向下，负值沿纵轴向上。z轴上的正值离你较近，负值离你较远 易混淆的三个属性： transform变形（用于元素进行旋转、缩放、移动） translate移动 transition过渡（设置元素的样式过度） transform 变形 语法：transform: non...
CSS动画与变形（一）-------transform变形
chenmo2001的博客
05-17 1720
CSS动画与变形（一） ———变形 一、简介： CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指...
css3的新增属性transform
xuanwuziyou的专栏
08-27 904
css3中可运用transform属性来实现让文字或图像显示出：旋转rotate,缩放scale,倾斜skew,移动translate 这些效果。 1. 旋转rotate    -ms-transform: rotate(30deg) ;     -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-trans
-ms-,-moz-,-webkit-,-o-含义及各浏览器内核整理
肖肖肖丽珠的博客
05-20 304
transform:rotate(30deg); //统一标识语句 -ms-transform:rotate(30deg);　　　　 //-ms代表ie内核识别码 -moz-transform:rotate(30deg);　　　　//-moz代表火狐内核识别码 -webkit-transform:rotate(30deg);　　　 //-webkit代表苹果的Safari浏览器及谷歌内核识别码 -o-transform:rotate(...
【CSS】transform 属性详解
JoeyLee的博客
08-16 1461
transform 属性的值 translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离 scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例 rotate(angle)、rotateX(angle)、ro...
CSS3 transform 属性 transform-origin 属性
kukudelaomao的博客
07-25 932
transform 属性 - scale：缩放，1 为原始大小。参数大于1放大，小于1缩小。属性值为一个时，xy 轴同时缩放；属性值为两个值时，分别控制 x、y 轴的缩放。 - rotate：水平旋转，属性值格式为 X deg。X 为正数时，顺时针旋转；为负数时，逆时针旋转 - translate：平移，基于 xy 轴重新定位元素。属性值为一个时，x、y 轴参数相同；为两个时，x、y 轴分别...
CSS3中设置3D变形的transform-style属性详解
09-24
transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解,需要的朋友可以参考下
深入剖析CSS变形transform(3d)
09-24
本文将详细介绍关于transform变形3D的内容，但需以了解...3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility。一起跟随小编过来看看吧
CSS3新增特性（二）
m0_48670609的博客
04-24 1195
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
CSS3（响应式布局）
l_al_al_a的博客
04-27 675
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势.docx
04-30
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势
毕业设计：vue+springboot乌鲁木齐南山冰雪旅游服务网站（源码 + 数据库 + 说明文档）
04-30
毕业设计：vue+springboot乌鲁木齐南山冰雪旅游服务网站（源码 + 数据库 + 说明文档） 2 开发工具及技术 2 2.1 B/S结构的介绍 2 2.2 JSP及SpringBoot技术的介绍 2 2.3 HTML及Vue技术的介绍 2 2.4 MYSQL数据库的介绍 3 2.5 开发环境的介绍 3 3 需求分析 4 3.1 可行性分析 4 3.2 功能需求分析 4 3.3 非功能需求分析 4 4 总体设计 6 4.1 系统总体结构设计 6 4.2 系统的数据库设计 6 5 系统功能实现 6 5.1 注册用户 6 5.2 管理员用户 6 6 系统测试 6 6.1 测试目的 6 6.2 测试内容 6 6.3 测试总结 6
C# 超简单的离线人脸识别库 ( 基于 SeetaFace6 ).zip
最新发布
04-30
c
CSS3的变形transform、过渡transition、动画animation学习
05-25
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3中非常重要的特性，可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3中的transform属性对元素进行平移、旋转、缩放、倾斜等操作，从而改变元素的形状和位置。具体的变形方式包括： 平移（translate）：移动元素的位置。 旋转（rotate）：以元素中心点为轴心进行旋转。 缩放（scale）：缩放元素的大小。 倾斜（skew）：倾斜元素。 矩阵变形（matrix）：通过矩阵变换实现复杂的变形效果。 示例代码： ``` div { transform: translate(50px, 50px); } ``` 2. 过渡(transition) 过渡是指在元素属性改变时，通过CSS3中的transition属性设置过渡时间和过渡效果，从而实现平滑的转换效果。具体的过渡方式包括： 过渡时间（transition-duration）：设置过渡动画的时间，单位可以是秒(s)或毫秒(ms)。 过渡效果（transition-timing-function）：设置过渡效果，常用的有linear、ease-in、ease-out、ease-in-out等。 过渡属性（transition-property）：设置需要过渡的属性，可以是单个属性或多个属性。 过渡延迟（transition-delay）：设置过渡动画的延迟时间。 示例代码： ``` div { transition: all 1s ease-in-out; } ``` 3. 动画(animation) 动画是指通过CSS3中的animation属性对元素进行动画效果的设置。具体的动画方式包括： 关键帧动画（@keyframes）：定义一组动画序列，可以设置元素在不同时间点上的样式。 动画时间（animation-duration）：设置动画持续时间，单位可以是秒(s)或毫秒(ms)。 动画速度（animation-timing-function）：设置动画速度，常用的有linear、ease-in、ease-out、ease-in-out等。 动画延迟（animation-delay）：设置动画延迟时间。 动画方向（animation-direction）：设置动画播放方向，可以是正方向（normal）、反方向（reverse）、交替播放（alternate）等。 动画次数（animation-iteration-count）：设置动画播放次数，可以是无限次（infinite）。 示例代码： ``` div { animation: myanimation 2s ease-in-out infinite; } @keyframes myanimation { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } ``` 以上就是CSS3中变形、过渡、动画的基本介绍和示例代码，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值