CSS3的transform属性的用法？

Posted 2023-04-22

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法

transform: none|transform-functions;

旋转 div 元素：

div

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */

参考技术A CSS3 transform是什么？
transform的含义是：改变，使…变形；转换
CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
下面我们来分解各个属性的用法：
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)
transform:skew()：
含义：倾斜；

.demo_transform2-webkit-transform:skew(20deg);-moz-transform:skew(20deg)
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3-webkit-transform:scale(1.5);-moz-transform:scale(1.5)
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)
transform综合：
transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：

.demo_transform5-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out
.demo_transform5:hover-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)sca本回答被提问者和网友采纳 参考技术B

transform:matrix(0,1,1,1,10,10)，https://www.apiref.com/css-zh/properties/transform/transform.htm，更多用法请看下CSS手册。

CSS3：transform translate transition 这些都是什么？

transform：一个属性名称，即CSS3 2D转换 属性。

translate：一个属性函数，用法是translate(dx,dy)

1 div
2 {
3     transform: translate(50px,100px);
4 }

transition：一个属性名称，添加过渡效果。

1 div
2 {
3     width: 200px;
4     transition: width 2s;
5 }
6 
7 div:hover{
8     width: 300px;
9 }

还有动画animate：

 1 @keyframes myfirst
 2 {
 3     from {background: red;}
 4     to {background: yellow;}
 5 }
 6 
 7 div
 8 {
 9     animation: myfirst 5s;
10 }

把 transform 丢到 keyframe 的 from / to 里面就可以实现炫酷的效果。