软件介绍:css3transform属性介绍CSS3的Transform属性是一个极其强大的工具，它允许您在二维或三维平面上对HTML元素进行转换和旋转。以下介绍了一些常...
CSS3的Transform属性是一个极其强大的工具，它允许您在二维或三维平面上对HTML元素进行转换和旋转。以下介绍了一些常用的Transform属性：
translate：该属性可以使元素在二维平面上移动，而不改变其原始布局或大小。例如，translate(50px, 100px)将元素向右移动50个像素，向下移动100个像素。
rotate：该属性可使元素绕其中心点旋转。例如，rotate(45deg)将元素逆时针旋转45度。
scale：该属性可调整元素的大小比例。例如，scale(2, 2)将元素放大两倍。
skew：该属性可扭曲元素的形状。例如，skew(30deg, 0deg)会使元素向右倾斜30度。
perspective：该属性可使元素在三维空间中立体显示。例如，perspective(500px)设置了观察者到元素表面的距离，并定义了元素的三维效果。
matrix：该属性可使元素进行任意的2D变换。例如，matrix(1, 0, 0, 1, 10, 10)在水平方向上移动元素10像素，垂直方向上也移动10像素。
这些属性可以组合使用，以实现更复杂的效果。例如，可以同时使用translate、rotate和scale将元素向右上方旋转并缩小。
以下是一个使用Transform属性的CSS样式示例：
.box {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50px, 50px) rotate(45deg) scale(0.5);
}
上述代码定义了一个类为“box”的元素，该元素将通过Transform属性移动50个像素，并逆时针旋转45度，然后缩小一半。这些变换将应用于元素的原始布局，因此其大小仍为100像素乘以100像素。
在讲正式语法之前，首先需要了解浏览器坐标系
这需要我们把浏览器界面想象成一个立体的场景
这是网上流传很广的浏览器坐标系图片
从左到右的方向是浏览器x轴的正方向
从上到下的方向是浏览器y轴的正方向
而z轴正方向是面对于我们的
了解这个很重要，因为下面我们旋转元素需要借助它来理解
3D旋转
我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度
在三维旋转中稍微要复杂一下
属性当然还是用我们的transform
三维旋转有下面三个函数分别对应三个维度的旋转
rotateX（xxdeg）
rotateY（xxdeg）
rotateZ（xxdeg）
rotateX是让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转
类似于我们的单杠运动
transform: rotateX(45deg);
类似于我们的单杠运动
transform: rotateX(45deg);
rotateY是让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转
类似于钢管舞运动..
transform: rotateY(45deg);
rotateZ是让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转
这就是我们在二维平面的旋转，类似于转盘
transform: rotateZ(45deg);
其实3D旋转还有一个合成的函数是rotate3d(num,num,num,deg)
用的不是很多，我就简单说一下
参数并不是我们想那样的3个角度值
而是三个数字一个角度值
前三个数字分别表示绕x、y、z轴旋转的矢量值
最后一个表示在空间的旋转角度，等价关系如下
rotate3d(1,0,0,xxdeg) <==> rotateX(xxdeg)
rotate3d(0,1,0,xxdeg) <==> rotateY(xxdeg)
rotate3d(0,0,1,xxdeg) <==> rotateZ(xxdeg)
3D位移与3D缩放
我们在2D中用到translateX()和translateY()在平面移动
3D中我们多了translateZ()允许我们沿着z轴平移
同样可以使用合成函数translate3d(x,y,z)
注意前两个值可以使用百分比形式，但是沿z轴平移的值只能使用长度值
同理我们的3D缩放
scaleX(num)、scaleY(num)、scaleZ(num)、scale3d(num,num,num)
至于它们的用法下面再通过例子来说
（3D的倾斜属性是不存在的，换句话说，不存在skew3d函数）
透视/景深属性perspective
景深这个名词，维基百科是这样就解释的
景深（英语：Depth of field, DOF）景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。
（看到这里，我的手默默的离开了键盘，仰天长叹，心想，这到底要什么样的学历才能看得懂）
我们可以这样来理解
景深就是我们的肉眼距离显示器的距离
景深越大，元素离我们越远，效果就不好
在我们CSS3中，perspective用于激活一个3D空间
属性值就是景深大小（默认none无景深）
有两种用法
.stage {
perspective: 500px;
}
应用景深的元素称为“舞台元素”
舞台元素的所有后代元素都会受影响
（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）
<div class="stage">
<div class="demo"></div>
</div>
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}
在这个例子中，我们把内部元素绕x轴旋转了45°后
由于他只是在二次元旋转，所以我们根本看不出来它旋转
但是我们现在加个景深
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}
这就相当于我们在舞台元素的中心位置往里看，这个子元素距离我们肉眼有500px
由于子元素的顺时针旋转，
元素上半部分离我们远，所以看起来很小
元素下半部分离我们近，所以看起来稍大
这样就会产生很强的立体感
刚才我说道我们的肉眼相当于在舞台元素中心的位置
其实这个“眼睛”的位置是可以调整的
这用到了perspective-origin属性
默认的属性值就是 50% 50%
也就是舞台元素的中心位置
我们可以尝试调整视角
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px;
perspective-origin: 10px 10px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}
这就相当于在舞台元素的距离原点（左上）10px，10px的位置往里看
理解这个需要我们一定的空间立体感
注意：景深大小一定要比你的动画元素大（我们不可能看到眼睛后面的东西）
景深的另一种用法，是应用在动画元素（不是舞台元素）变形的函数中
和其他变形函数写在一起
.stage .demo {
......
transform: rotateX(45deg) perspective(100px);
3D属性transform-style
这个属性指定了子元素如何在空间中展示
只有两个属性值：flat（默认）和preserve-3d
flat 表示所有子元素在2D平面呈现
preserve-3d 表示所有子元素在3D平面呈现
（prederve是保护、维持的意思，preserve-3d就是保持三维空间的意思）
当然如果我们想要3D的效果，就要使用 transform-style: preserve-3d;
这个属性只是针对设置属性元素的子元素如何展示
而对子元素的子元素无效
而且对于设置了overflow: hidden;的元素，设置3D效果会失效
道理很简单，跳出了父元素平面的子元素无法显示了，结果自然还是2D效果
应用于这个属性的元素我们称作“容器”
这个属性我们下面通过一个例子再来体会
背面可见属性backface-visibility
通过这个元素我们可以指定当元素背对我们时是否可见
只有两个属性值visibility（默认）和hidden
如果我们希望元素背对我们不可见
就这样设置
.demo {
...
backface-visibility: hidden;
}
下面我通过一个例子来把上面讲到的属性全部实践一下
示例：旋转的三维立方体
<div class="stage"> <!--舞台元素，视角所在-->
<ul class="three-d-box"> <!--动画容器，通过它来控制整个立方体-->
<li>?</li> <!--动画元素，立方体的六个面-->
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
</div>
ul { /*调整ul标签的样式，取消内边距、外边距，和“点”样式*/
padding: 0;
margin: 0;
list-style-type: none;
}
.stage { /*设置舞台元素在屏幕居中，设置合适的景深大小*/
position: relative;
width: 800px;
height: 800px;
margin: 100px auto;
perspective: 800px;
}
@keyframes move { /*设置动画关键帧*/
0% {
transform: rotateX(0deg);
}
25% {
transform: rotateX(180deg);
}
50% {
transform: rotateX(360deg) rotateY(0deg);
}
75% {
transform: rotateX(360deg) rotateY(180deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.stage .three-d-box { /*动画容器居中在舞台元素中间*/
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
transform-style: preserve-3d; /*设置3D属性让子元素三维空间呈现*/
animation: move 3s linear infinite; /*设置动画*/
}
.stage .three-d-box>li { /*设置动画子元素公共属性*/
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
font-size: 50px;
line-height: 200px;
text-align: center;
opacity: 0.5;
}
/*为了保证我们对立方体位置的控制，我们需要让动画容器在立方体的中间位置*/
.stage .three-d-box>li:nth-child(1) {
background-color: red;
transform: translateZ(-100px);
}
.stage .three-d-box>li:nth-child(2) {
background-color: greenyellow;
transform: translateZ(100px);
}
.stage .three-d-box>li:nth-child(3) {
background-color: cornflowerblue;
transform: rotateX(90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(4) {
background-color: orangered;
transform: rotateX(-90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(5) {
background-color: deeppink;
transform: rotateY(90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(6) {
background-color: lightcoral;
transform: rotateY(-90deg) translateZ(100px);
}