CSS3新特性-3D变形transform-组团学

我们存在的现实世界以及肉眼所看到的都是3D的，而照片就是将3D物体呈现在2D平面的例子。

2d x y

3d x y z

CSS3中的3D坐标系与数学中学习的立体几何中3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图（三维坐标系）

牢记坐标

x轴：水平向右：x 右边是正的，左边是负的

y轴：垂直向下：y 下面是正的，上面是负的

z轴：垂直屏幕：z 外面是正的，里面是负的

越往外越大，是正的，越往里越小是负的

一、3D移动 translate3D

说明

3D移动在2D移动的基础上多加一个可以移动的方向，就是z轴方向。

语法

transform:translateX(100px);/*仅x轴上移动*/
transform:translateY(100px);/*仅y轴上移动*/
transform:translateZ(100px);/*仅z轴上移动 注意：translateZ一般用px单位 */
/*一起设置：*/
transform:translateX(100px) translateY(100px) translateZ(100px);
/*简写方式：*/
transform:translate3d(100px);/*在x，y,z轴上分别移动*/

translateX(x)：仅水平方向移动，即沿X轴移动

主要目的实现移动效果

translateY(y)：仅垂直方向移动，即Y轴移动

那么，translateZ(z) 在Z轴上的移动，如何在页面中看出效果呢？

注意
1. translateZ一般用px单位，往外走是正的，往里走是负的
2. transform:translate3d(x,y,z); xyz不能省略，如果没有就写0

二、透视(perspective)

说明

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。（简单说透视就是在2D网页中显示3D的效果）
透视原理：近大远小

浏览器透视：把近大远小的所有图像，透视在屏幕上。

perspective：透视也称为视距，表示视点到屏幕的距离。视点，用于模拟透视效果时人眼的位置，也就是屏幕中的距离d。

语法

透视写在被观察元素的父盒子上面，作用于所有3D转换的子元素

d：视距，就是人的眼睛到屏幕的距离

z：就是z轴，物理距离屏幕的距离，z轴越大（正值），看到的物体就越大。
注意

并非任何情况下需要透视效果，根据开发需要进行设置。

三、用透视看translateZ(z)

说明

transformZ的直观表现形式就是（物体）大小的变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，最大值就是200，超过200就看不到了，物体将视线全部遮挡。

translate3d(x,y,z)

注意

其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

四、3D旋转

说明

以前2D里面只能设置旋转多少度，3D旋转指可以让元素在三维空间内沿着x轴、y轴、z轴或者自定义轴进行旋转。

语法

transform:rotateX(45deg);/*沿着x轴正方向旋转45度*/
transform:rotateY(45deg);/*沿着y轴正方向旋转45度*/
transform:rotateZ(45deg);/*沿着z轴正方向旋转45度*/
transform:rotate3d(x,y,z,deg);/*沿着自定义轴方向旋转多少度*/

rotateX()

说明

沿着 x 立体旋转

语法

body{
    /* 透视写在本父元素上  */
    perspective:300px;
}
img {
 	width: 200px;
    display: block;
    margin: 200px auto;
  /*过渡写在本身上  */
    transition: all 1s;
}
img:hove {
  transform:rotateX(45deg);
}

左手法则
1. 左手拇指指向x轴正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

rotateY()

说明

沿着y轴进行旋转

语法

body{
    perspective:200px;
}
img {
  transition:all 1s;
}
img:hove {

transform:rotateY(45deg);
}

左手法则
1. 左手拇指指向y轴的正方向（向下）
2. 其余手指的弯曲方向就是该元素沿着y轴旋转的正值方向

rotateZ()

说明

沿着z轴进行旋转

语法

img {
  transition:all 1s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

3D旋转 rotate3d

说明

transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）

xyz是表示旋转轴的矢量，是表示是否希望沿着该轴旋转，最后一个表示旋转的角度。

语法

transform:rotate3d(1,0,0,45deg) <!--沿着x轴旋转45度-->
transform:rotate3d(0,1,0,45deg) <!--沿着y轴旋转45度-->
transform:rotate3d(0,0,1,45deg) <!--沿着z轴旋转45度-->
transform:rotate3d(1,1,0,45deg) <!--沿着对角线旋转45度-->

四、3D呈现

说明

父盒子里面通常会有很多的子盒子，子盒子是否要保持立体效果呢？我们用 transform-style 来设置。
语法
```
transform-style:preserve-3d ;
```
特点
1. 控制子元素是否开启三维立体空间
2. 默认值transform-style:flat 子元素不开启3D立体空间
3. transform-style:preserve-3d 子元素开启立体空间
4. 代码写在父元素上，但是效果加在子元素上

代码

<style>
    body{
        perspective: 500px;
    }             
    .box{
        width: 500px;
        height: 300px;
        margin: 200px auto;
        position: relative;
        transition: all 1s;
        transform-style: preserve-3d;
        /* transform: rotateY(-50deg);
        transform-style: preserve-3d; */
    }
    .box div{
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
    }
    #div2{
        background-color: yellowgreen;
        transition: all 1s;
    }
    #div2:hover{
        transform: rotateX(45deg);
    }
    .box:hover{
        transform: rotateY(-50deg);
    }	

</style>

<div class="box">
    <div id="div1"></div>
    <div id="div2"></div>
</div>