code前端网CSS3变换属性详解
css3中的transform属性变换用户元素的空间位置。
本文结果显示的图像均基于下图所示的变换
变换二维变换
Matrix
- 3x3 向量变换矩阵
- 执行二维变换变换
其中 x1, y1 是经矩阵变换的向量。从公式中可以看出，Matrix中的e和f主要用于设置元素在X轴和Y轴上的平移，a、d主要用于设置元素在X轴上的缩放比例， Y轴，a、b、c、d用于设置元素在XY平面上的旋转。 旋转/平移/螺旋等可以通过设置矩阵直接达到同样的效果
变换平移
- 设置元素在X轴或Y轴上的平移变换
translate(15px, 25px) #元素沿着 X轴正方向平移 15px，沿着 Y轴正方向平移 25px Matrix(1, 0, 0, 1, 15, 25) #效果相同
变换比例
- 设置元素时scale 参数为
scale(2, 0.5) #元素在 X轴上拉伸一倍，在 Y轴上缩小一倍 Matrix(2, 0, 0, 0.5, 0, 0) #效果相同
- scale 在 X 或 Y 轴上为负数，则元素会在对应的儒家
变换中进行反转。相当于rotationZrotate(30deg) #围绕屏幕法向量顺时针旋转 30度
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
![CSS3 transform 属性详解]()
transform skew
- 设置X轴和Y轴的倾斜角度
transform-origin
rotate(30deg) #围绕屏幕法向量顺时针旋转 30度
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
transform变换原点
- 默认值为(50%,50%,0)是默认变换原点位于 XY 平面的中心
- ，变换元素的 Z= 0。值为(||left|center|right, ||top|center|bottom, ) 从左到右三个参数代表左侧的偏移量变换起始相模型、上部偏移盒模型零件和 Z 轴偏移
rotate(30deg);
rotate(30deg);
transform-origin: 'left top';
将变换原点设置为元素位置 单击时，元素绕左上角旋转
transform 三维变换
CSS3三维世界坐标系如下图所示。它使用左手坐标系，Y 轴方向沿着屏幕向下
透视
- 透视定义 3D 元素和视图之间的距离。设定透视镜头到XY轴平面的距离
perspective 设定透视点到屏幕的距离（XYZ空间中平面Z=0），即透视点的位置是 (0, 0, 150px)
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: yellow; -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>结果：
将透视设置为 1500px，结果是：
透视值与元素大小无关。透视表示从透视点到元素的距离。透视点越远，透视效果越差。
- 添加对于具有透视属性的元素，添加时Z轴会出现在场景中，因此其子元素将获得3D效果，包括translateZ和rotationY/rotateX
translateZ
- 通过添加translateZ属性给transform，元素可以在Z轴上变换 平移变化
- 在透视元素的子元素上添加translateZ属性
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: yellow; -webkit-transform: translateZ(-50px) rotateX(45deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>给id=div2的元素添加translateZ(-50px)， IE。 ，将元素沿负Z轴平移150像素，结果为：
CSS3中的三维坐标系使用左手坐标系，Z轴垂直于屏幕外侧。因此，当 div2 沿负 Z 轴平移 50 像素后，里面的元素实际上位于屏幕后面 50 像素处。 ，所以看起来更小
- 在透视元素的子元素上添加translateZ属性
rotateY/rotateX
- rotateY和rotationX可以设置元素绕Y轴或X轴旋转
rotateY(45deg) #围绕 Y轴顺时针旋转 45 度 rotateX(-45deg) #围绕 Z轴逆时针旋转 45 度
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
相关文章
