css3 中 transfrom 属性用户元素空间位置的变换。
本文结果中展示的画面都是基于下图进行的变换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
transform二维变换
Matrix
- 3x3 的变换矩阵
- 对二维向量进行转换
其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知，Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素在 XY 平面上的旋转。rotate/translate/screw 等都可以直接通过设置 Matrix 来达到同样的效果
transform translate
- 设置元素在 X轴或者 Y轴上的平移变换
translate(15px, 25px) #元素沿着 X轴正方向平移 15px，沿着 Y轴正方向平移 25px Matrix(1, 0, 0, 1, 15, 25) #效果相同
transform scale
- 设置元素在 X轴或者 Y轴上的缩放
scale(2, 0.5) #元素在 X轴上拉伸一倍，在 Y轴上缩小一倍 Matrix(2, 0, 0, 0.5, 0, 0) #效果相同
- scale 的参数为负数时，元素在对应的方向上进行反转
transform rotate
- 二维空间中，rotate即围绕屏幕法向量旋转，等同于 rotateZ
rotate(30deg) #围绕屏幕法向量顺时针旋转 30度 Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
transform skew
- 设置 X轴和 Y轴的倾斜角度
transform-origin
transform 变换原点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
- 默认值为(50%, 50%, 0)，即默认的变换原点位于变换元素的 Z=0 的 XY 平面的中心点
- 取值为 (<length>|<percentage>|left|center|right, <length>|<percentage>|top|center|bottom, <lenght>) 三个参数从左到右分别表示变换原点相盒模型左侧的偏移量、盒模型顶部的偏移量以及 Z轴偏移量
rotate(30deg);
rotate(30deg);
transform-origin: 'left top';
设置 transform-origin 为元素坐上点后，元素围绕左上角旋转文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
transform三维变换
CSS3三维世界坐标系如下图所示，采用的是左手坐标系，Y轴方向沿着屏幕向下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
perspective
- perspective 定义了 3D 元素和视图之间的距离。设置的是透视镜头到 XY 轴平面的距离
perspective 设置的是透视点到屏幕及(XYZ空间中Z=0平面的距离)，即透视点位置为(0, 0, 150px)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
<!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>结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
将 perspective 设置为 1500px，结果为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
perspective 的值与元素呈现的大小无关，perspective 表示透视点到元素的距离，透视点越远，透视效果越差
- 添加了 perspective 属性的元素，添加后场景中出现 Z轴，故其子元素获得 3D 效果，包括 translateZ 和 rotateY/rotateX
translateZ
- 通过在 transform 中添加 translateZ 属性，可以实现元素在 Z轴上的平移变化
- 在添加 perspective 元素的子元素上的 transform 属性中添加 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)，即将元素沿着 Z轴负轴平移了 150px，结果为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3184.html
CSS3 中的三维坐标系采用的是左手坐标系，Z轴垂直屏幕向外，故将 div2 沿着 Z轴负轴平移 50px 后，里面的元素实际上位于了屏幕后面 50px 的位置，故看起来变小了
- 在添加 perspective 元素的子元素上的 transform 属性中添加 translateZ
rotateY/rotateX
- rotateY 和 rotateX 可以设置元素围绕 Y轴或 X轴进行顺旋转
rotateY(45deg) #围绕 Y轴顺时针旋转 45 度 rotateX(-45deg) #围绕 Z轴逆时针旋转 45 度