转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果,可以简单理解为变形
一、2D转换
1、移动(translate)
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
①语法:
transform:translate(x,y);
或者分开写——transform:translateX(n);
transform:translateY(n);
②重点
- 定义2D转换中的移动沿着x和y轴移动元素
- 不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)
- 对行内标签没有效果
2、旋转(rotate)
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
①语法:
transform:rotate(度数)
②重点
- rotate里面跟度数,单位是deg,比如rotate(45deg)
- 角度为正时,顺时针;为负时,为逆时针
- 默认旋转的中心点是元素的中心点
3、转换中心点(transform-origin)
我们可以通过该属性设置元素转换的中心点
①语法:
transform-origin:x y;
②重点
- 注意后面的参数x和y用空格隔开
- x和y默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x和y设置像素或者方位名词(top bottom left right center)
4、缩放(scale)
只要给元素添加了这个属性就能控制它放大还是缩小
①语法:
transform:scale(x,y);
②注意
- 其中的x 和y用逗号分隔
- transform:scale(1,1):宽和高都放大一倍,相当于没有放大
- transform:scale(2):只写一个参数,第二个参数则和第一个参数一样
- scale缩放最大的优势是可以设置转换中心点缩放,默认以中性点缩放而且不影响其他盒子
5、综合写法
同时使用多个转换,其格式为:transform:translate()空格rotate()空格scale()....等
其顺序会影响转换的效果(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候,记着要将位移放到最前面
二、3D转换
1、三维坐标系
X轴:水平向右,X右边是正值,左边是负值
Y轴:垂直向下,Y下面是正值,上面是负值
Z轴:垂直屏幕,Z往外面是正值,往里面是负值
2、3D移动translate3d
transform:translateX(100px) translateY(100px) translateZ(100px);等价于 transform: translate3d(100px,100px,100px)
注:translate3d中的d必须小写;且xyz是不能省略的,如果没有值就写0
3、透视perspective
①如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内),透视我们也称为视距(人的眼睛到屏幕的距离),距离视觉点越近的在电脑平面成像越大,越远成像越小。透视的单位是像素
要求:透视写在被观察元素的父盒子上
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大
②translateZ
3、3D旋转rotate3d
3D旋转可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义进行旋转
①语法
- transform:rotateX(45deg):沿着x轴正方向旋转45度
- transform:rotateY(45deg):沿着y轴正反向旋转45度
- transform:rotateZ(45deg):沿着z轴正方向旋转45度
- transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg(了解即可)
②判断元素旋转方向:左手准则
左手的手拇指指向x(y)轴的正方向,其余手指的弯曲方向就是该元素沿着x(y)轴旋转的方向
4、3D呈现transform-style:控制子元素是否开启三维立体环境
①语法:
transform-style: flat(默认值,子元素不开启3d立体空间) | preserve-3d(子元素开启3d立体空间);
②注意事项:
- 代码写给父级,但是影响的是子盒子
- 使用此属性必须先使用 transform 属性