【CSS3】rotate3d（）中的参数是什么意思？
其它 3D 正⽅体演⽰：
⽂章⽬录
CSS3中的3D旋转函数rotate3d()
很多⼈跟我刚开始⼀样，搞不懂 rotate3d(x, y, z, angle) 中的 xyz 参数究竟是什么⿁意思，只知道，xyz代表⽮量（向量）。在 MDN 中是这样介绍的：
那么究竟个什么⿁是向量？
什么是⽮量（向量）？
物理学中称为 ⽮量；
数学中称为 向量；
⽮量（向量）通俗的说，就是点到点之间的距离，⽽正负则表⽰⽅向的正反，⽆关⼤⼩。
⽽坐标点 O(0,0,0) 为坐标轴原点，即三轴相交的地⽅，也是起始点。
向量的坐标表⽰
下图中，点 P 是正⽅体原点的对⾓点，⽽原点到该点，即 【点O】到【点P】之间的距离，就是向量。
可这么理解：
P(x,y,z)
rotate3d(P, angle)
即，原点 O(0,0,0) 到点 P(x,y,z) 旋转 angle 度。
【线OP】 亦称正⽅体对⾓线。
那么想要正⽅体沿对⾓线 OP 旋转 45°，那就是 rotate3d(1,1,1,45deg);
为何？且看下节【平⾯坐标系】。
⼆维坐标系（平⾯直⾓坐标系）
由下图可看出，由 x=y 坐标点连成的线，就是正⽅形的对⾓线。(1,1)、(2,2)、(3,3)…(999,999) 均在⼀条线上。
三维坐标系（空间直⾓坐标系）
当换成 3D 坐标系，(1,1,1)、(2,2,2)、(3,3,3)…(999,999,999) 同样在⼀条线上，这条线，即为正⽅体的对⾓线。
那么，在 rotate3d() 中，既然只要求根据正⽅体对⾓线顺旋转 45°，⽆论是 rotate3d(1,1,1,45deg)，还是rotate3d(2,2,2,45deg)…rotate3d(999,999,999,45deg) 都可以实现相同效果，所以⽤ rotate3d(1,1,1,45deg) 即可。
同样的：
rotate3d(1,0,0,angle)，表⽰原点到点（1,0,0）这个⽅向，旋转多少度，即该点仅在 x 轴上，所以绕 x 轴旋转；
rotate3d(0,1,0,angle)，表⽰原点到点 (0,1,0) 这个⽅向，旋转多少度，即该点仅在 y 轴上，所以绕 y 轴旋转；
rotate3d(0,0,1,angle)，表⽰原点到点 (0,0,1) 这个⽅向，旋转多少度，即该点仅在 z 轴上，所以绕 z 轴旋转；
注意！Web坐标系与数学/物理学中坐标系的不同
1. 数学/物理学等等（通常）的坐标系
（下⾯这个换了个⽅向⽽已）
2. Web 中的坐标系
PS：可以看出，Y轴反过来了
3D 正⽅体 Demo
除 IE 之外的浏览器，可正常运⾏ code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
/* 浮动修复 */
.clearfix{
zoom: 1;
}
.clearfix:after{
display: block;
content:'';
text函数什么意思clear: both;
visibility: hidden;
height: 0;
}
/* 元素浏览器⽔平居中 */
.wrap{
position: absolute;
left: 50%;
top: 50%;
}
/* 装骰⼦的容器 */
.container{
margin-top: -250px;
margin-left: -250px;
padding: 200px;
background:linear-gradient(135deg, rgb(255, 243, 176) 10%, rgb(202, 38, 255) 100%);
/* 注意此处, -webkit- 中，⾓度 = 90 - 原 = 90 - 135 = -45deg */
background:-webkit-linear-gradient(-45deg, rgb(255, 243, 176) 10%, rgb(202, 38, 255) 100%); }
/* - - - - - - - - - - 骰⼦样式 - - - - - - - - - - */

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。