04.css提高-css3d转换

目录

一.css3d转换

1.3d转换之转移：

2. 3d转化之透视：perspective

3. 3d转换之旋转：rotate3d

4. 3D呈现：transform-style

二. 3d转换案例

案例1：3d转换-两面反转的盒子

案例2：3d转换-3d导航栏效果

---

一.css3d转换

1.3d转换之转移：

语法：

transform: translate3d(x,y,z)  // 沿着x轴、y轴和z轴移动位置

transform: translateX(n); //沿着x轴移动

transform: translateY(n); //沿着y轴移动

transform: translateZ(100px)_ //仅仅是在z轴上移动，注意，translateZ一般用px单位

注意：

1、简写的话，xyz是不能省略的，如果没有就用0代替

2、Z轴越大我们看到的物体就越大，反之越小，物体也越小（前提是透视固定的情况下）

---

2. 3d转化之透视：perspective

语法：

perspective: 500px;  

注意：

1、透视的单位是px

2、透视值越小（近），成像越大；透视值越大（远），成像越小

3、透视设置给被观察元素的父盒子上面

---

3. 3d转换之旋转：rotate3d

语法：

transform: rotateX(deg) //沿着X轴旋转

transform: rotateY(deg) // 沿着Y轴旋转

transform: rotateZ(deg) // 沿着Z轴旋转

transform: rotate3d(x,y,z,deg)  //沿着自定义轴旋转，了解即可！xyz表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

例如 ：transform: rotate3d(1,0,0,45deg)  就是沿着x轴旋转45度

            transform: rotate3d(1,1,0,45deg)  沿着对角线旋转45度

---

4. 3D呈现：transform-style

控制子元素是否开启三维立体环境

语法：

transform-style: flat;   //  默认子元素不开启3d立体空间

transform-style: preserve-3d;    // 子元素开启3d立体空间

注意：

1、代码写给父级，但是影响的是子盒子

2、非常重要

---

二. 3d转换案例

案例1：3d转换-两面反转的盒子

body {

            perspective: 400px;

        }

        .box {

            position: relative;

            width: 400px;

            height: 400px;

            margin: 100px auto;

            transition: all 2s;

            /* 3、让背面的紫色盒子保留立体空间 */

            transform-style: preserve-3d;

        }

        .box:hover {

            /* 2、然后让box盒子旋转180，就可以看到后面的盒子了 */

            transform: rotateY(180deg);

        }

        .box div {

            position: absolute;

            top: 0;

            right: 0;

            width: 100%;

            height: 100%;

            border-radius: 50%;

            color: #fff;

            font-size: 30px;

            text-align: center;

            line-height: 400px;

        }

        .front {

            background-color: pink;

            z-index: 1;

        }

        .back {

            background-color: purple;

            /* 1、把后面的盒子沿着y轴旋转180度，正好和前面的盒子背靠背 */

            transform: rotateY(180deg);

        }

<div class="box">

        <div class="front">好好学习</div>

        <div class="back">才能天天向上</div>

    </div>

---

案例2：3d转换-3d导航栏效果

* {

            margin: 0;

            padding: 0;

        }

        ul {

            margin: 100px;

        }

        ul li {

            float: left;

            margin: 12px;

            list-style: none;

            width: 120px;

            height: 35px;

            /* 3、一会需要给box旋转，也需要透视，所以直接给li打开透视，里面的所有盒子都能够看出立体效果 */

            perspective: 500px;

        }

        .box {

            position: relative;

            width: 100%;

            height: 100%;

            /* 2、子元素设置了旋转，父元素要打开3d立体空间 */

            transform-style: preserve-3d;

            transition: all 1s;

        }

        .box:hover {

            /* 6、鼠标放在box盒子上沿着x轴旋转90度 */

            transform: rotateX(90deg);

        }

        .front,

        .bottom {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            text-align: center;

            line-height: 35px;

        }

        .front {

            background-color: pink;

            z-index: 1;

            /* 5、让前面的盒子沿着z轴移动高度的一半 */

            transform: translateZ(17.5px);    

        }

        .bottom {

            background-color: purple;

            /* 1、让后面的孩子沿着x轴旋转90度 */

            /* 4、让下面的盒子沿着y轴向下移动高度的一半，同时要注意，多个转换属性，移动要放在最前面 */

            transform: translateY(17.5px) rotateX(-90deg) ;

        }

<ul>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">好好学习</div>

                <div class="bottom">才能天天向上</div>

            </div>

        </li>

    </ul>