03-css3中的3D转换

一、CSS3-3D转换

1.3D

特点：近大远小，物体和面遮挡不可见

1.1三维坐标系

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

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

z 轴：垂直屏幕 -- 往外边的是正值，往里面的是负值

2.3D移动tranlate3d

2.1 语法

transform:translate3d(x,y,z);
transform:translateZ(z);

2.2用法

        .box3 {
            /* 向里面移动100 */
            transform: translateZ(-100px);
        }

        .box4 {
            /* 向右移动50，向下移动50，向外移动50 */
            /* translate3d */
            transform: translate3d(50px, 50px, 50px);
        }

        .box5 {
            /* 向里面移动100 */
            /* translate3d里面的值不能省略，没有就写0 */
            transform: translate3d(0, 0，-100px);
        }

2.3总结

1.translate3d里面的3d要小写。

2.translate3d后面的值一定是三个值(x,y,z)，不能省略，没有的就写0，且顺序不能颠倒。

3.3d的z值一般都是精准的像素值。

4.z值为正数就是往外面移动，为负数就是往里面移动

3.透视perspective

1.产生3d效果必须写透视。

2.透视就是视距，即人眼到屏幕的距离。

3.近大远小

4.透视prespective的单位是像素

5.透视写在被观察元素的父盒子上。

4.3D转换之移动—translatedZ

给父元素加perspective后，再给子元素添加translateZ会产生近大远小。

        body {
            /* 人眼距屏幕500px */
            perspective: 500px;
        }
        
        .box1 {
        /*变小*/
            transform: translateZ(-100px);
        }

        .box2 {
        /*变大*/
            transform: translateZ(100px);
        }

5.3D转换之旋转—rotate

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

5.1 rotateX

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度，即上边向后转

transform: rotateX(-45deg) -- 沿着 x 轴反方向旋转 45 度，即上边向前转

5.2 rotateY

transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度，即右边向后转

transform: rotateY(-45deg) -- 沿着 y 轴反方向旋转 45 度，即左边向后转

5.3 rotateZ

transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度，即顺时针

transform: rotateZ(-45deg) -- 沿着 z 轴反方向旋转 45 度，即逆时针

5.4 rotate3d

transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

transform: rotate3d(1, 1, 0, 45deg) -- 沿着左上右下对角线旋转 45度

rotate()默认就是rotatez()。

6 3D呈现—transfrom-style

控制子元素是否开启三维立体环境，真3d。

6.1 用法

            /* 给父元素加preserve-3d */
            /* 默认是flat,不开启三维立体环境 */
            /* transform-style: flat; */
            transform-style: preserve-3d;

6.2总结

1.代码给父亲加，影响的是子元素

2.默认是flat,不开启，preserve-3d开启

3.作用是当父元素3d变换时，子元素任然保留之前的3d状态。

6.3 与视距的区别

preserve-3d是真3D，让子元素保留了3D空间。
perspective是伪3D，傻瓜式近大远小，只是起辅助视觉观察效果的作用。

7.案例

7.1翻转盒子案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }

        .box {
            position: relative;
             300px;
            height: 300px;
            margin: 100px auto;
            border-radius: 50%;
            transition: all .3s;
            /* 要保留子盒子的三维立体环境 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box::before,
        .box::after {
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 100%;
            line-height: 300px;
            text-align: center;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
        }

        .box::before {
            content: "小艾同学";
            background-color: #09f;
            /* 提高层级，让他在前面 */
            z-index: 1;
        }

        .box::after {
            content: "加油鸭~";
            background-color: #90f;
            /* 先让盒子反过来，和before背靠背 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

7.2 3D旋转导航栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            margin: 100px 5px 0;
            list-style: none;
             120px;
            height: 35px;
            perspective: 500px;
        }

        .box {
            position: relative;
             100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }


        /* 鼠标经过，向上翻转90度 */
        .box:hover {
            transform: rotateX(90deg);
        }

        .box::after,
        .box::before {
            position: absolute;
            left: 0;
            top: 0;
             100%;
            height: 100%;
            line-height: 35px;
            text-align: center;
        }

        .box::before {
            content: "小艾同学";
            background-color: #f34;
            /* 第二步，将这个盒子向外移动高度的一半 */
            /* 原因是立方体旋转的轴是中心点，要让这两个盒子中心点一样 */
            z-index: 1;
            transform: translateZ(17.5px);
        }

        .box::after {
            content: "要加油鸭~";
            background-color: #09f;
            /* 第一步：先让盒子向下移动高度的一半，再向前翻转90度 */
            /* 位移写前面 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
        <li>
            <div class="box"></div>
        </li>
    </ul>
</body>

</html>

7.3 旋转相册

图片上传不了，可将案例中的图片任意替换

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 透视 */
            perspective: 1000px;
        }

        section {
            position: relative;
             300px;
            height: 200px;
            margin: 200px auto;
            /* 使子元素保留三维立体空间 */
            transform-style: preserve-3d;
            /* 匀速循环播放10s */
            animation: rotate 10s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0deg);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 100%;
            background: url(images/xi.gif) no-repeat;
            background-size: 300px;
        }

        section div:first-child {
            /* 向外300 */
            transform: translateZ(300px);
        }

        section div:nth-child(2) {
            /* 先沿着y轴右内转60度，在向外移动300 */
            /* 此时要先写旋转再写移动 */
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            /* 先沿着y轴右内转120度，在向外移动300 */
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            /* 先沿着y轴右内转180度，在向外移动300 */
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            /* 先沿着y轴右内转180度，在向外移动300 */
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            /* 先沿着y轴右内转180度，在向外移动300 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

7.4 立方体

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
             200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 5s;
        }

        div[class ^=content] {
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            opacity: .5;
        }

        /* 前 */
        .content1 {
            /* 向外移动一半 */
            transform: translateZ(100px);
            background-color: #90f;
        }

        /* 后 */
        .content2 {
            /* 向里移动一半 */
            transform: translateZ(-100px);
            background-color: #99a;
        }

        /* 左 */
        .content3 {
            /* 先旋转90度，再向左移动一半 */
            transform: rotateY(90deg) translateZ(-100px);
            background-color: #09f;
        }

        /* 右 */
        .content4 {
            /* 先旋转90度，再向右移动一半 */
            transform: rotateY(90deg) translateZ(100px);
            background-color: #f34;
        }

        /* 上 */
        .content5 {
            /* 先沿x轴旋转180度，在向上移动一半 */
            transform: rotateX(90deg) translateZ(-100px);
            background-color: #f99;
        }

        /* 下 */
        .content6 {
            /* 先沿x轴旋转180度，在向下移动一半 */
            transform: rotateX(90deg) translateZ(100px);
            background-color: green;
        }

        .box:hover {
            transform: rotate3d(1, 1, 1, 360deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content1">前</div>
        <div class="content2">后</div>
        <div class="content3">左</div>
        <div class="content4">右</div>
        <div class="content5">上</div>
        <div class="content6">下</div>
    </div>
</body>

</html>

7.5 相册

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            perspective: 1000px;
        }

        ul {
            position: relative;
             300px;
            height: 400px;
            margin: 200px auto;
            /* 旋转中线点在底部 */
            transform-origin: bottom;
            transition: transform .5s;
            /* 开启3d状态 */
            transform-style: preserve-3d;
        }

        ul:hover {
            transform: rotateX(30deg);
        }

        ul li {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
             100%;
            height: 100%;
        }

        ul li img {
             100%;
            height: 100%;
            border: 5px solid #09f;
            border-radius: 10px;
            transform-origin: left;
            /* 匀速过渡1s */
            transition: transform linear 1s
        }

        ul:hover li:nth-child(5) img {
            /* 给每一张图片设置延迟 */
            transition-delay: .5s;
            transform: rotateY(-180deg);
        }

        ul:hover li:nth-child(4) img {
            transition-delay: 1s;
            transform: rotateY(-150deg);
        }

        ul:hover li:nth-child(3) img {
            transition-delay: 1.5s;
            transform: rotateY(-120deg);
        }

        ul:hover li:nth-child(2) img {
            transition-delay: 2s;
            transform: rotateY(-50deg);
        }

        ul li:nth-child(1) img {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="./images/01.jpg" alt=""></li>
        <li><img src="./images/02.jpg" alt=""></li>
        <li><img src="./images/03.jpg" alt=""></li>
        <li><img src="./images/04.jpg" alt=""></li>
        <li><img src="./images/05.jpg" alt=""></li>
    </ul>
</body>

</html>