css preserve-3d 使用

最新推荐文章于 2024-05-11 15:22:40 发布

是阿臻

最新推荐文章于 2024-05-11 15:22:40 发布

阅读量484

点赞数

分类专栏：前端问题杂记文章标签： css 3d 前端

本文链接：https://blog.csdn.net/weixin_43191327/article/details/125886710

版权

前端问题杂记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。所以 transform-style 是应该加在父盒子上面的。
可以把拥有这个属性的盒子想象成一个舞台，里面的子元素都是演员，他们可以随意表演，我们可以通过舞台观看
perspective 指定了观察者与 z=0 平面的距离，可以想象是我们和舞台的距离，如果我们离舞台更近是不是看到的东西越少，东西越大呢，如果我们离舞台越远看到的越多，演员也随之越小
只要开启了 transform-style: preserve-3d, 舞台也就是 3d 的，perspective 加不加无所谓的，它只是规定了我们和舞台的距离
demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 200px;
        margin: 0 auto;
        transform: rotateX(10deg);
        transform-style: preserve-3d;
      }

      .div {
        text-align: center;
        transform-style: preserve-3d;
        animation: test 5s linear infinite;
        transform-origin: 50% 50%;
      }

      .div-inner {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        transform: rotateX(90deg);
        background: red;
      }

      @keyframes test {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }

      .text {
        transform: translateX(80px) translateY(20px) translateZ(-360px);
        z-index: 999;
      }
    </style>
  </head>

  <body>
    <div style="position: relative">
      <div class="container">
        <div class="text" style="">sdfdsf</div>
        <div class="div">
          <div class="div-inner">SDFSDF</div>
        </div>
      </div>
    </div>
  </body>
</html>

是阿臻

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css preserve-3d 使用

指定了观察者与z=0平面的距离，可以想象是我们和舞台的距离，如果我们离舞台更近是不是看到的东西越少，东西越大呢，如果我们离舞台越远看到的越多，演员也随之越小。可以把拥有这个属性的盒子想象成一个舞台，里面的子元素都是演员，他们可以随意表演，我们可以通过舞台观看。设置元素的子元素是位于3D空间中还是平面中。加不加无所谓的，它只是规定了我们和舞台的距离。是应该加在父盒子上面的。,舞台也就是3d的，...
复制链接

扫一扫

专栏目录