CSS3转换
CSS3转换 2D&3D
transform: none|transform-functions; 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
transform-origin: x-axis y-axis z-axis; 属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。 axis的值可以为left|center|right|length|%
2D
transform-functions有:
translate(x,y)根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。只给一个参数value时,x=value,y=0。参数为负表示向相反方向移动。translateX(n)和translateY(n)
scale(x,y)元素宽度和高度增加或减少的大小。只给一个参数value时,x=y=value。scaleX(n)和scaleY(n)
rotate(angle)在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
skew(x-angle,y-angle)表示X轴和Y轴倾斜的角度。只给一个参数value时,x=value,y=0deg。参数为负表示向相反方向倾斜。skewX(angle)和 skewY(angle)
matrix() 有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
变换组合:顺序是从右往左的,变换的底层其实就是矩阵的运算
3D
transform-style: flat|preserve-3d;属性指定嵌套元素是怎样在三维空间中呈现。 flat(默认值) 表示所有子元素在2D平面呈现。 preserve-3d 表示所有子元素在3D空间中呈现。使用此属性必须先使用 transform 属性。
perspective: number|none;属性允许你改变3D元素是怎样查看透视图。number元素距离视图的距离,以像素计。none默认值,与0相同,不设置透视。作用于子元素,所以将属性写在容器身上。
原理:景深越大,灭点越远,元素变形更小;景深越小,灭点越近,元素变形更大。
perspective-origin: x-axis y-axis;属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。axis:left|center|right|length|%
backface-visibility: visible|hidden; 属性定义当元素背面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用。visible(默认值) 背面是可见的。hidden 背面是不可见的。
transform-functions有:
translate3d(x,y,z)定义 3D 转化。translateX(x) translateY(y) translateZ(z) 仅使用用于 X或Y或Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。scaleX(x) scaleY(y) scaleZ(z) 仅使用XYZ的一个值
rotate3d(x,y,z,angle)定义 3D 旋转。rotateX(angle) rotateY(angle) rotateZ(angle) 仅绕XYZ的一个轴旋转。
perspective(n)定义 3D 转换元素的透视视图。作用于本身,所以将方法写在子元素身上。必须在transform属性的第一位
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。