1.2D转换
- rotate()：在一个给定度数顺时针旋转的元素，负值是允许的，这样是元素逆时针旋转
div{
background:black;
border:1px solid red;
height:100px;
width:100px;
box-sizing:border-box;
transform: rotate(30deg)
}
- translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
transform: translate(50px,100px);
- scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3); /*转变宽度为原来的大小的2倍，和高度为其原始大小3倍*/
- skew() ：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
transform: skew(30deg,20deg);
/*
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜
*/
2.3D转换
- rotateX：围绕其在一个给定度数X轴旋转的元素
transform: rotateX(120deg)
- rotateY：围绕其在一个给定度数Y轴旋转的元素
transform: rotateY(120deg)
3.transition
div{
transition: width 2s, height 2s, transform 2s;
}
/*在宽度、高度和转换上2s完成过渡效果*/
transition: property duration timing-function delay;
transition-property：指定CSS属性的name，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function:指定transition效果的转速曲线
transition-delay:定义transition效果开始的时候
