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

开始今天的分享以前，仍是先来每篇一句，但愿你们的努力都能获得将来本身的承认

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

一. 平面效果

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到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
• y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
• z：是一个０到１之间的数值，主要用来描述元素围绕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来控制元素的旋转

三. 结语

以上就是本次分享的所有内容了，但愿个人文章能对你有所帮助，若你发现文章之中存在某些错误或让你疑惑的位置，也欢迎你们在评论区指出，让咱们一块儿讨论，共同进步！