开始今天的分享之前,还是先来每篇一句,希望大家的努力都能得到未来自己的认可
我永远不会为自己怎样努力过而道歉。 --爆裂鼓手
一. 平面效果
1 translate()
.transform{
transform: translate(120px, 50%);
}
百分比以自身为基准 , 当只有一个参数时,默认为沿x轴移动的距离。
将当前类名为transform的元素沿x轴方向平移120px,沿y轴方向移动自身高度的50%。
2. rotate()
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
}
默认以元素宽高的一半为原点旋转,括号内参数为顺时针旋转度数,可为负数,负数为逆时针旋转。
二. 3d效果
1.perspective()
该属性控制3d元素的透视效果
- 写3d效果必加语句,否则看不到所写语句的3d效果
写法:
.father {
perspective: 100px;
}
相当于当前眼睛距离该元素的距离,实现近大远小的3d效果,建议写大一些些,因为写的不够大可能出现元素效果超出当前屏幕的情况。如下
2. transform-origin()
可以控制元素在3d变换时所沿变换的X轴、Y轴以及Z轴所在的位置
默认为中心点 ,如下
.transform{
transform-origin: 50%,50%,0;
}
- 一个值: 必须是长度,百分比,或 left, center, right, top, bottom关键字中的一个。
- 两个值: 两个必须是长度,百分比,或left, center, right关键字中的一个。
- 三个值: 前两个值必须是长度,百分比,或left, center, right关键字中的一个。 第三个值必须是长度。它始终代表Z轴偏移量。
元素的X轴,Y轴,Z轴会随着元素的3d变换而改变,所以使用3d语句是有先后顺序的!!!
3. transform-style
官方定义:transform--style属性指定嵌套元素是怎样在三维空间中呈现。
实际能够实现什么效果下面三张图看懂!
下图是一个原始的3d效果的盒子
下图是将包裹3d元素的父盒子沿Y轴旋转60deg角度后
下图是包裹3d元素的父盒子加上语句
transform-style: preserve-3d;
默认属性为:flat
可以看到3张图里,没有加上transform-style语句时,父盒子旋转会使3d盒子被压扁变形,加上之后又实现了3d的效果。这就是该语句控制子元素在空间中以3d或平面效果呈现
4. translate3d(x,y,z)
translateX(100px)函数功能等同于translate3d(100px,0,0)
translate(100px)函数功能等同于translate3d(0,100px,0)
translateZ(100px)函数功能等同于translate3d(0,0,100px)
translate3d的X轴Y轴上的数值的写法与2d的写法一样,z轴必须为长度,z轴控制元素与视窗的距离,数值越大,在屏幕上的显示就越大,数值越小显示在屏幕上的大小也就越小如下图
偏移前
偏移后
5. rotate3d(x,y,z,a)
- x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
- y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
- z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
- a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
a指的是一个旋转角度值。turn是圈,1turn = 360deg; 另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈
由于rotate3d旋转为复合,不方便理解,建议新手使用rotateX、rotateY和rotateZ来控制元素的旋转
三. 结语
以上就是本次分享的全部内容了,希望我的文章能对你有所帮助,若你发现文章之中存在某些错误或让你疑惑的位置,也欢迎大家在评论区指出,让我们一起讨论,共同进步!