css3 3d转换

Posted 2021-04-09 前端小白学习

3d转换

    如果想要元素具备3d效果，则需要使其父元素变成一个3d空间

      parent {

        transform-style: preserve-3d;

        perspective: 500px;  // 视距

      }

      

    设置的perspective的值不会影响元素的初始的大小，但是会影响3d变化时的一个状态

      但是会影响，元素改变后的状态

简单案例

div { width: 100px; height: 100px; background: #000; margin: 0 auto;}body { transform-style: preserve-3d; perspective: 400px;}.box{ transform: rotateX(45deg);}
<div></div><div class="box"></div>

页面效果

另一个

.box { width: 100px; height: 100px; position: relative; margin: 100px auto; transform-style: preserve-3d; perspective: 200px;}.item { width: 100px; height: 100px; position: absolute; top: 0; left: 0; text-align: center; line-height: 100px; font-size: 36px; color: #fff; background: rgba(0,0,0,.3);}.item:first-child { transform: translate3d(0, 0, -50px); text-align: left;}.item:last-child { transform: translate3d(0, 0, 50px);  text-align: right;}
<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>

页面效果

translate3d

    transform: translate3d(x, y, z)

    transform: translateX()

        translateY()

        translateZ()

    平时如果想要使用平移效果，那么尽量使用transform: translate3d()

    因为translate3d会强制开启GPU渲染。性能比2d的更好

    translate3d(x, y, z)

rotate3d

    rotateX

    rotateY

    rotateZ

    和rotate效果相同

    rotate3d(x, y, z, deg)

        x y z为三个矢量，矢量方向为对应坐标轴方向

        如果xyz为正值则是正方向

        如果xyz为负值则是负方向

        三个方向上的三个值可以确定一条合成的方向

        以该方向为一条线 让元素在这条线上进行旋转对应的角度

例子

body { transform-style: preserve-3d; perspective: 400px;}div { width: 100px; height: 100px; background: black; margin: 100px auto; transform: rotate3d(1, 1, 1, 45deg);}html<div></div>

页面效果

scale3d

    scale3d(x, y, z)

如果多个元素（祖先后代）都需要是3d效果，则都需要添加

transform-style: preserve-3d;

但是只需要给最上层元素添加视距

灭点位置 perspective-origin

    当景物离自己的位置越远时，就会越趋于集中到某一个点上。这个点就是灭点

比如，一条笔直的公路，你的视线看过去公路胡越来越细

来源百度图片

实现一个立方体

代码实现

body { transform-style: preserve-3d; perspective: 500px; /* 调整灭点位置 */  perspective-origin: center center; }.box { width: 200px; height: 200px; margin: 200px auto; position: relative; transform-style: preserve-3d; animation: rotate 10s linear; /* transform-origin: left center -100px; */ /* transform: scaleZ(2) */}.item { position: absolute; top: 0; left: 0; width: 200px; height: 200px;  background: rgba(0,0,0,.3); color: #fff; font-size: 72px; text-align: center; line-height: 200px; box-sizing: border-box; border: 1px solid #000;} .item1 { transform: rotateX(90deg) translateZ(100px);  /* x轴向上旋转90度 ，z轴正方向移动100px*/}.item2 { transform: rotateX(-90deg) translateZ(100px);} .item3 { transform: rotateY(-90deg) translateZ(100px);}.item4 { transform: rotateY(90deg) translateZ(100px);}.item5 { transform: translateZ(100px);}.item6 { transform: rotateY(180deg) translateZ(100px); }@keyframes rotate { 100% {    transform: rotate3d(-1,1,1,360deg); }}

<div class="box"> <div class="item item1">上</div> <div class="item item2">下</div> <div class="item item3">左</div> <div class="item item4">右</div> <div class="item item5">前</div> <div class="item item6">后</div></div>

页面展示

看不懂的强烈推荐看下张鑫旭的css3 3d转换，很清楚