Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
transition是一个复合属性,包括transition-property、 transition-duration、transition-timing-function、transition-delay这四个子属性。
通过这四个子属性的配合来完成一个完整的过渡效果
transition-property:过渡属性(默认为all)
transition-duration:过度持续时间(默认为0s)
transition-timing-function:过渡函数(默认为ease函数)
transition-delay:过渡延迟时间(默认为0s)
基本属性:
transform:none 定义不进行转换
transform:matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
transform:translate(x,y) 定义 2D 转换。
transform:translate3d(x,y,z) 定义 3D 转换。
transform:translateX(x) 定义转换只是用X轴的值
transform:translateY(y) 定义转换只是用Y轴的值
transform:translateZ(z) 定义转换只是用Z轴的值
transform:scale(x[,y]?) 定义 2D 缩放转换
transform:scale3d(x,y,z) 定义 3D 缩放转换
transform:scaleX(x) 通过设置 X 轴的值来定义缩放转换
transform:scaleY(y) 通过设置 Y 轴的值来定义缩放转换
transform:scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
transform:rotate(angle) 定义 2D 旋转,在参数中规定角度
transform:rotate3d(x,y,z,angle) 定义 3D 旋转
transform:rotateX(angle) 定义沿着 X 轴的 3D 旋转
transform:rotateY(angle) 定义沿着 Y 轴的 3D 旋转
transform:rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
transform:skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
transform:skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
transform:skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
transform:perspective(n) 为 3D 转换元素定义透视视图