从零开始前端学习[36]:Cs3中的3D效果实现

最新推荐文章于 2024-05-12 17:24:39 发布

^_^ 小小码nong

最新推荐文章于 2024-05-12 17:24:39 发布

阅读量825

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签： 3d 井深 perspectiv

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78237754

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

Cs3中的3D效果实现

perspective井深
transform-style 3D环境

提示
博主:章飞_906285288
博客地址：http://blog.csdn.net/qq_29924041

perspective井深

在3d效果实现的过程中，需要一个井深需要一个3D的环境，其中perspective就是为了创建井深，而transform-style就是为了创建3d环境

井深:指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。值越大看起来距自己越近，元素越大。值越小，越远，元素越小,

最好给需要3D的盒子的父级

通常我们使用800px或者1200px ,因为这两个做3D效果是最好的

.main{ perspective: 800px; }
.main{ perspective: 1200px; }

参考使用文档

transform-style 3D环境

定义：指定子元素定位在三维空间内，当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。

值：transform-style: preserve-3d  创建3D环境

3d效果的实现是需要以上两种属性进行结合才能表现出效果的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent;perspective: 800px}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: deeppink;margin: 30px;transition: 5s;transform-style: preserve-3d;box-shadow: 0 0 10px 0 #000}
      div p:nth-child(1){transform-origin: center center}
      div p:nth-child(1):hover{transform: translateZ(100px) rotate(-0.5turn)}
  </style>
</head>
<body>
    <div class="main">
      <p>3d</p>
    </div>
</body>
</html>

显示效果如下所示:
这里写图片描述

可以从上面看到，相对来说是确实呈现出了一种3d的效果

当然这是最简单的3d特性展示，后面会来个牛逼的3d效果展示出来

^_^ 小小码nong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[36]:Cs3中的3D效果实现

Cs3中的3D效果实现perspective井深transform-style 3D环境提示博主:章飞_906285288 博客地址：http://blog.csdn.net/qq_29924041perspective井深在3d效果实现的过程中，需要一个井深需要一个3D的环境，其中perspective就是为了创建井深，而transform-style就是为了创建3d环境
复制链接

扫一扫