CSS3 transform-style 3D空间，透视图perspective

Posted 2022-07-29 胖鹅68

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 transform-style 3D空间，透视图perspective相关的知识，希望对你有一定的参考价值。

文章目录

一、参考资料
二、问题描述
三、解决思路
- 3.1 模拟3D旋转
- 3.2 平面遮罩，添加热区
四、实现3D方案遇到的知识盲点
- 4.1 transform-style 元素在3D空间中呈现
- 4.2 perspective 透视视角

一、参考资料

二、问题描述

工作中，遇到一个3D旋转的问题，如图所示

上面的城市旋转，然后会有一些立在城市上面的东西作为链接

三、解决思路

3.1 模拟3D旋转

画出一个六边形，然后绝对定位各个部门相对于六边形的坐标位置（点击坐标位置会跳转），然后利用3D旋转，将各个部门立起来，最后将整个六边形旋转，保证六边形的旋转与MP4文件的动画保持一致，最终实现动画与链接的同步。

备注：如果要显示3D效果，必须要设置transform-style:preserve-3d表示所有子元素在3D空间中呈现。

3.2 平面遮罩，添加热区

在旋转的城市上面添加一个遮罩层，每个部门的位置添加热区链接，将47秒的视频拆成47个图片，每1秒绝对定位到各个部门上，然后添加定时器，每秒切换热区的位置，用户点击部门，实际上是触发热区的跳转。

四、实现3D方案遇到的知识盲点

4.1 transform-style 元素在3D空间中呈现

transform-style: flat|preserve-3d;

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	`表示所有子元素在3D空间中呈现`。

<!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>
  </head>
  <body>
    <div class>
      <div class="parent" onclick="whoami('parent')">parent
        <div class="child" onclick="whoami('child')">child
          <div class="grandson" onclick="whoami('grandson')">grandson</div>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
  function whoami(who) 
    alert(who);
  
</script>

<style>
  .parent 
    transform-style: preserve-3d;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    border: 1px solid red;
    /* background-color: red; */
    margin: 0 auto;
    margin-top: 50px;
    transform: rotateX(45deg);
    /* background-color: #eee; */
    /* 透视距离 */
    /* perspective: 250px; */
  

  .parent .child 
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 1px solid blue;
    /* background-color: blue; */
    transform: rotateX(-45deg);
    display: inline-block;
  

  .parent .child .grandson 
    height: 100px;
    width: 100px;
    border: 1px solid green;
    border-radius: 50%;
    /* background-color: green; */
    transform: rotateY(60deg);
    display: inline-block;
  
</style>

4.2 perspective 透视视角

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

注意：perspective 属性只影响 3D 转换元素。

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
      #div1 
        position: relative;
        height: 150px;
        width: 150px;
        margin: 50px;
        padding: 10px;
        border: 1px solid black;
        perspective: 150px;
        -webkit-perspective: 150px; /* Safari and Chrome */
      

      #div2 
        padding: 50px;
        position: absolute;
        border: 1px solid black;
        background-color: red;
        transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg); /* Safari and Chrome */
      
    </style>
  </head>

  <body>
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>
  </body>
</html>

以上是关于CSS3 transform-style 3D空间，透视图perspective的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 transform-style 3D空间，透视图perspective