css3新特性第七章(3D变换)

css新特性第七章(3D变换)

一、3d空间和景深

元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！

使用 transform-style 开启 3D 空间，可选值如下：

flat ：让子元素位于此元素的二维平面内（ 2D 空间）------ 默认值

preserve-3d ：让子元素位于此元素的三维空间内（ 3D 空间）

景深

何为景深？------ 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立

体。

perspective
- none ：不指定透视 ------（默认值）
- 长度值：指定观察者距离 z=0 平面的距离，不允许负值。
perspective 设置给发生 3D 变换元素的父元素！

基础html结构

markdown 复制代码

  .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 150px;
     }
 <div class="outer">
        <div class="inner">3D变换</div>
    </div>

设置 rotateX 旋转效果

代码

.inner {

width: 200px;

height: 200px;

background-color: palegreen;

/* 设置x轴旋转类似于体操运动员，一直在单杠上面上下 */

transform: rotateX(50deg);

}

设置rotateY 旋转效果

代码

.inner {

width: 200px;

height: 200px;

background-color: palegreen;

/* 设置Y轴旋转类似于旋转，沿着柱子左右方向 */

transform: rotateY(50deg);

}

总结

我们发现，当我们设置了 perspective 的参数大小会发现，我们数值设置的越小，那么我们看到的z轴面积就越大，改值跟我们眼睛看东西一样，越近对应看到的物体也就越大，数字越小就代表越近，因为只有旋转效果是最好的，位移和缩放是看不出来的，因为没有厚度

二、透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。通常我们不需要跳转透视点位置；

perspective-origin
400px 300px 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）

默认效果

代码

markdown 复制代码

 <style>
     .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 500px;
       /* 修改透视点位置 默认是正中央 */
       /* perspective-origin: 102px 102px; */

       /* 透视点位置  x 轴代表是右下角   y代表底下蹲下来看 */
       /* perspective-origin: 400px 300px; */
     }

     .inner {
       width: 200px;
       height: 200px;
       background-color: rgb(60, 209, 209,0.7);


       /* 设置x轴旋转    */
       transform: rotateX(50deg);

        /* 设置Y轴旋转    类似于旋转，沿着柱子左右方向 */
        /* transform: rotateY(50deg); */
     }

  </style>
</head>
<body>
    <div class="outer">
        <div class="inner">3D透视</div>
    </div>
</body>

设置透视点位置

perspective-origin: 400px 300px; 透视点位置 x 轴代表是右下角 y代表底下蹲下来看

rotateX 效果

.inner {

width: 200px;

height: 200px;

background-color: rgb(60, 209, 209,0.7);

/* 设置x轴旋转 */

transform: rotateX(50deg);

}

rotateY 效果

transform: rotateY(50deg);

三、3D位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：

先给元素添加转换属性 transform

编写 transform 的具体值， 3D 相关可选值如下：

值	含义
translateZ	设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
translate3d	第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均不能省略。

html基本结构

markdown 复制代码

  .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 500px;
       /* 修改透视点位置 默认是正中央 */
       perspective-origin: 259px 226px;

     }
 <div class="outer">
        <div class="inner">3D位移</div>
    </div>

写法1：translateZ

.inner {

width: 200px;

height: 200px;

background-color: rgba(87, 62, 230, 0.8);

/* 写法1 z 轴我们可以看到是放大了实际上是从里面出来*/

transform: translateZ(150px);

/* 增加阴影 */

box-shadow: 0px 0px 10px black;

}

写法2：transform

x 轴 y 轴 z轴三个参数都不能省

transform: translate3d(100px,100px,100px);

总结

我们看到的第一眼以为是一个放大，实际上不是的，位移后，原本盒子没有厚度导致我们以为只是放大，这个时候我们需要调整透视点位置即可

四、3D选择

旋转是这些效果中最明显的。

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：

复制代码

1. 先给元素添加 转换属性 transform
2. 编写 transform 的具体值， 3D 相关可选值如下：

值	含义
rotateX	设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负值逆时针。
rotateY	设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负值逆时针。
rotate3d	前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度。

rotateX

沿着x轴开启3d空间

效果

代码

markdown 复制代码

  .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 500px;
       /* 修改透视点位置 默认是正中央 */
       perspective-origin: 102px 102px;

     }

     .inner {
       width: 200px;
       height: 200px;
       background-color: rgb(167, 248, 44,0.9);
       /* x 轴 顺时针 */
       /* transform: rotateX(45deg) */

        /* y 轴 顺时针 */
        /* transform: rotateY(45deg); */

        /* 写法3  写的是4个值  x y z  旋转角度   */
        transform: rotate3d(1,0,1,30deg);


     }
<div class="outer">
        <div class="inner">3D旋转</div>
    </div>

rotateY

沿着y轴进行旋转

效果

代码

markdown 复制代码

 /* y 轴 顺时针 */
        transform: rotateY(45deg);

rotate3d

复合属性写法写的是4个值 x y z 旋转角度

transform: rotate3d(1,0,1,50deg);

五、3D缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值， 3D 相关可选值如下：

值	含义
scaleZ	设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。
scale3d	第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许省略。

代码结构

markdown 复制代码

<style>
     .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 500px;
       /* 修改透视点位置 默认是正中央 */
       perspective-origin: 102px 102px;

     }

     .inner {
       width: 200px;
       height: 200px;
       background-color: rgb(167, 248, 144,0.9);
       
       /* 写法1  scaleZ我们看到好像没有效果，我们调转旋转角度看  如果真的有厚度，到90度那么就可以看得到 */
       transform: scaleZ(4) rotateY(45deg);

       /* 写法2  最后一个参数是景深除以 最后一个参数，代表的就是离得近了*/
       transform: scale3d(1.5,1.5,4) rotateY(45deg);
     }

  </style>
</head>
<body>
    <div class="outer">
        <div class="inner">3D缩放</div>
    </div>

scaleZ

scaleZ我们看到好像没有效果,这个时候我们调整一下角度再看效果

transform: scaleZ(4) rotateY(45deg);

scale3d

最后一个参数是景深除以最后一个参数，代表的就是离得近了

transform: scale3d(1.5,1.5,4) rotateY(45deg);

六、多重变换

我们同时使用多个属性同时实现变换，多重变换时，建议最后旋转。

方式1

transform-origin: left;

transform: rotateY(45deg);

方式2

y 轴线右边需要计算宽度

transform-origin: 200px 0px;

transform: rotateY(45deg);

方式3

/* 方式3 x 轴线上方 */

transform-origin: 0px 0px;

transform: rotateX(45deg);

方式4

/* 方式4 x 轴线下方需要计算宽和高度 */

transform-origin: 202px 202px;

transform: rotateX(45deg);

方式5

位移放大旋转一起使用旋转放到最后

/* 位移放大旋转一起使用旋转放到最后 */

transform: translateZ(100PX) scaleZ(1.5) rotateY(45deg);

七、背部可见性

使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：

visible ：指定元素背面可见，允许显示正面的镜像。------ 默认值
hidden ：指定元素背面不可见

** backface-visibility 需要加在发生 3D 变换元素的自身上。**

效果

代码

markdown 复制代码

<style>
     .outer {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       font-size: 30px;
       text-align: center;
       line-height: 200px;
       margin: 0 auto;
       margin-top: 100px;

       /* 父元素需要开启3d空间 */
       transform-style: preserve-3d;
       /* 设置景深   近大远小  必须要设置在父元素上面 */
       perspective: 500px;
       /* 修改透视点位置 默认是正中央 */
       perspective-origin: 102px 102px;

     }

     .inner {
       width: 200px;
       height: 200px;
       background-color: rgba(240, 35, 161, 0.9);

       /* 越过90度，背后不能看到 */
       backface-visibility: hidden;

       /* 旋转y轴 */
       transform: rotateY(40deg);
     }

  </style>
</head>
<body>
    <div class="outer">
        <div class="inner">3D背部可见性</div>
    </div>