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>

分享结束！有不足之处敬请批评指正！

相关阅读:
二分图洛谷P2055 [ZJOI2009]假期的宿舍
 并查集洛谷P1640 [SCOI2010]连续攻击游戏
 贪心洛谷P2870 Best Cow Line, Gold
贪心 NOIP2013 积木大赛
 快速幂 NOIP2013 转圈游戏
 倍增LCA NOIP2013 货车运输
 树形DP 洛谷P2014 选课
 KMP UVA1328 Period
动态规划入门 BZOJ 1270 雷涛的小猫
 KMP POJ 2752Seek the Name, Seek the Fame
原文地址：https://www.cnblogs.com/xiaoaitongxue/p/12649907.html