CSS3之3D转换

文章目录

• • 一、3D移动translate3d
  • 二、perspective（透视）
  • 三、translateZ
  • 四、rotateX-rotateY-rotateZ
  • 五、rotate3d(x,y,z,deg)
  • 六、3D呈现transfrom-style
  • 七、���转木马案例

    一、3D移动translate3d

    3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

     - transform:translateX(100px) ===> 仅仅在x轴上移动 - transform:translateY(100px) ===> 仅仅在y轴上移动 - transform:translateZ(100px) ===> 仅仅在z轴上移动 - transform:translate3d(x,y,z) ===> x,y,z代表要移动的方向

    二、perspective（透视）

    • 写到被观察盒子的父盒子上
    • 模拟人眼观察目标物体的距离

          body{        perspective: 1000px;    }    p{        width: 200px;        height: 200px;        background-color: blueviolet;        margin: 0% auto;        transform: translate3d(100px,100px,100px);    }    1

      三、translateZ

      Z轴值越大，目标物体就越大

          body{        perspective: 500px;    }    p{        width: 100px;        height: 100px;        margin: 0% auto;        background-color: antiquewhite;        transform: translateZ(100px);            }            1    

      四、rotateX-rotateY-rotateZ

      沿着X，Y，Z轴旋转

          body{        perspective: 500px;    }    p:hover{        transform: rotateZ(360deg);        transform: rotateY(360deg);        transform: rotateZ(360deg);    }    p{        height: 200px;        width: 200px;        display: block;        background-color: aquamarine;        margin:100px auto;        transition: all 2s;    }        123

      五、rotate3d(x,y,z,deg)

      沿着自定义轴旋转deg为角度

          body{        perspective: 500px;    }    p:hover{        transform: rotate3d(1,0,1,360deg);        transform: rotate3d(1,1,0,360deg);        transform: rotate3d(0,1,1,360deg);    }    p{        height: 200px;        width: 200px;        display: block;        background-color: aquamarine;        margin:100px auto;        transition: all 2s;    }    123

      六、3D呈现transfrom-style

       - 控制子元素是否开启三维立体环境 - transform-style:flat子元素不开启3d立体空间默认的 - transform-style:perserce-3d;子元素开启立体空间 - 代码写给父级，但是影响的是子盒子

          body{        perspective: 500px;    }    .father{        height: 200px;        width: 200px;        position: relative;        margin: 100px auto;        transform-style: preserve-3d;        transition: all 2s;    }    .father:hover{        transform: rotateY(360deg);    }    .father p{        width: 100%;        height: 100%;        position: absolute;        background-color: aqua;    }    .father p:last-child{        background-color: yellowgreen;        transform: rotateX(60deg);    }            1        2    

      七、旋转木马案例

                      Document    body{        perspective: 1500px;    }    section{        position: relative;        width: 300px;        height: 200px;        margin: 200px auto;        transform-style: preserve-3d;        /* background-color: yellowgreen; */        animation: rotate 3s linear infinite;    }    section:hover{        animation-play-state: paused;    }    @keyframes rotate{        0%{            transform: rotateY(0);        }        100%{              transform: rotateY(360deg);          }    }    section p{        position: absolute;        top: 0%;        left: 0%;        width: 100%;        height: 100%;        background-image: url(./img/赛博朋克.jpg);        background-size: 100% 100%;        background-repeat: no-repeat;    }    section p:nth-child(1){        transform: rotateY(0deg) translateZ(400px)    }    section p:nth-child(2){        transform: rotateY(60deg) translateZ(400px)    }    section p:nth-child(3){        transform: rotateY(120deg) translateZ(400px)    }    section p:nth-child(4){        transform: rotateY(180deg) translateZ(400px)    }    section p:nth-child(5){        transform: rotateY(240deg) translateZ(400px)    }    section p:nth-child(6){        transform: rotateY(300deg) translateZ(400px)    }            1        2        3        4        5        6