小白笔记:前端小白浅谈translate和rotate

2,014 阅读4分钟

开始今天的分享之前,还是先来每篇一句,希望大家的努力都能得到未来自己的认可

我永远不会为自己怎样努力过而道歉。 --爆裂鼓手

一. 平面效果

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来控制元素的旋转

三. 结语

以上就是本次分享的全部内容了,希望我的文章能对你有所帮助,若你发现文章之中存在某些错误或让你疑惑的位置,也欢迎大家在评论区指出,让我们一起讨论,共同进步!