3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-origin:center center;(默认) 景深基点(设置用户从哪个方向看) backface-v ...
分类：
Web程序 时间：
2016-12-28 21:27:30
阅读次数：
237
今天来个3D旋转菜单，是纯css3实现的，主要用到transform,transition,backface-visibility。 主要是transform这个变换，它是今天猪脚。 transform里有transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 transfo ...
分类：
其他好文 时间：
2016-12-22 06:21:36
阅读次数：
179
效果： HTML部分： <body class="body"> <div class="rect-wrap"> <!-- //舞台元素，设置perspective，让其子元素获得透视效果。 --> <div class="container"> <!-- //容器，设置transform-style ...
分类：
Web程序 时间：
2016-12-17 02:28:58
阅读次数：
254
css3实践—创建3D立方体 要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张 ...
分类：
Web程序 时间：
2016-12-03 21:30:12
阅读次数：
265
绘制3D环境 父元素设置了 preserve-3d 子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果 值越小 透视效果越明显(联系现实) perspective: 50px; 设置元素背面是否可见 visible:可见的 ...
分类：
Web程序 时间：
2016-11-23 23:13:01
阅读次数：
243
首先创建一个容器如div,然后设置其相关的3d属性，主要是三个1.perspective 透视，值越小3D感越强，值越大视觉正常。2.perspective-origin,透视点一般居于容器的中心。3.transform-style:preserve-3d,声明容器内的环境是3D环境，其内容可以以3 ...
分类：
Web程序 时间：
2016-10-19 09:48:11
阅读次数：
231
css .transformBox{ transform-style: preserve-3d; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ea ...
分类：
移动开发 时间：
2016-10-13 13:47:28
阅读次数：
215
1 实现3D立方体 首先准备好UL以及6个Li； 代码如下 ul { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve ...
分类：
Web程序 时间：
2016-10-07 20:08:45
阅读次数：
150
思路：（要实现魔方六个面以及九个小块的样式并旋转展示。） 内容部分：魔方分为六个面，每个面有九个小块，使用一个div内嵌套六个div再嵌套九个div实现内容部分。 样式部分：最外层div设置属性 transform-style: preserve-3d;实现整体的3D效果。 内部六个面使用 tran ...
分类：
其他好文 时间：
2016-10-07 13:43:42
阅读次数：
263
基本原理： 1.首先我们需要让图片能旋转的效果，我们让所有图片绝对定位(position:absolute),共用一个中心点。 2.对于舞台我们加一个视距，比如下面的demo是 perspective: 800px; 3.对于容器 我们可以加一个3D视图 transform-style: prese ...
分类：
Web程序 时间：
2016-08-31 17:08:48
阅读次数：
528
