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;

            width: 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;

            width: 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;

            width: 120px;

            height: 35px;

            perspective: 500px;

        }

        .box {

            position: relative;

            width: 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;

            width: 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;

            width: 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;

            width: 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;

            width: 200px;

            height: 200px;

            margin: 100px auto;

            transform-style: preserve-3d;

            transition: all 5s;

        }

        div[class ^=content] {

            position: absolute;

            top: 0;

            left: 0;

            width: 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;

            width: 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;

            width: 100%;

            height: 100%;

        }

        ul li img {

            width: 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>

巴特西