admin管理员组文章数量:1530847
文章目录
- 一、参考资料
- 二、问题描述
- 三、解决思路
- 3.1 模拟3D旋转
- 3.2 平面遮罩，添加热区
- 四、实现3D方案遇到的知识盲点
- 4.1 transform-style 元素在3D空间中呈现
- 4.2 perspective 透视视角
一、参考资料
- transform-style 菜鸟
- CSS3 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>
<!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: red;
/* background-color: red; */
margin: 0 auto;
margin-top: 50px;
transform: rotateX(45deg);
/* background-color: #eee; */
/* 透视距离 */
/* perspective: 250px; */
margin-top: 100px;
}
.parent .child {
height: 200px;
width: 200px;
border-radius: 50%;
border: 1px solid blue;
background: blue;
/* background-color: blue; */
transform: translatez(145px);
display: inline-block;
transform-style: preserve-3d;
}
.parent .child .grandson {
height: 100px;
width: 100px;
border: 1px solid green;
background: green;
border-radius: 50%;
/* background-color: green; */
transform: rotateY(60deg);
display: inline-block;
transform: translatez(45px);
}
</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)</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>
本文标签： 透视图空间transformperspectivestyle
版权声明：本文标题：CSS3 transform-style 3D空间，透视图perspective 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725894718a1047494.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论