transform属性
Posted 着迷1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transform属性相关的知识，希望对你有一定的参考价值。
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 转换元素定义透视视图
以上是关于transform属性的主要内容，如果未能解决你的问题，请参考以下文章