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

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效果展示出来

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

从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局，极其重要)
html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性提示博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...
从零开始前端学习[32]:css3中新增加的一些文本属性
css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...
tableau实战系列（三十四）-教你如何在tableau中实现3D效果作图
前言我们知道,目前 Tableau 还不支持 3D 图表的实现.但是,如果你希望在 Tableau 中呈现立体效果,我们可以另辟蹊径,来实现一些简单的. 柱形图很常见,因为是平面的,也被称为条形图. ...
AI中的3D效果应用——凸出与斜角
AI中的3D效果应用--凸出与斜角 (写作时间:6月5日作者:陈铭军) 如何使用AI中的3D效果中的凸出与斜角做一个骰子,首先使用椭圆工具(L)画出骰子的1-6的样子,就像这样. 然后在菜单栏中点击 ...
Android OpenGL ES 学习(九) – 坐标系统和实现3D效果
OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学 ...
前端学习与工作中常用网站推荐
一.视频学习/刷面试题网站 1.慕课网(质量好,价格较贵,更专业,废话少) 2.腾讯课堂 (质量参差不齐,价格便宜,较啰嗦) 3.牛客网 (刷刷各大企业的面试题) 4.LeetCode (刷算法题) ...
前端学习-过渡、2d和3d动画
一.过渡(transition) *!display没有过渡效果* 复合写法: transition: css属性过渡效果持续时长过渡的方式延迟时间; 1.语法.属性 //选择过渡效果的cs ...
从零开始前端学习[14]:选择器的优先级
选择器的优先级选择器的优先级的使用注意事项,往往在我们写代码的时候是格外需要注意的. 单独来看标签的优先级 ID个数不同的时候的优先级 ID个数一致的时候,看类选择器个数 ID选择器和类选择器都一致 ...

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

Cs3中的3D效果实现

perspective井深

transform-style 3D环境

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

最新文章

热门文章