css3动态立体图过渡效果事例
css3添加了很多很是适用的属性，此中 3D 属性就就有着很是棒的页面结果，那么动态的3D是若何做出来的呢，这里小编就给大师分享一下本身放动态立体图过渡结果事例；
0节制立体图动弹
15用在网页中完当作立体图
东西/原料
- 电脑
- Sublime text 2
方式/步调
- 1
起首看一下小编的页面布局，就是一般的构成立体图的架构，stage 嵌套 container，最后存放六个div，作为立体图的面；
- 2
然后节制一下 stage（舞台）的视距和视点和container（容器)的样式，然后设置为撑持 3D ；
关头代码：-webkit-transform-style：preserve-3d；
- 3
总体节制一下六个div的样式，和在div中的文字样式；
opacity：0.7；节制透明度
position：absolute；定位
- 4
然后我们别离节制每个面的位置和扭转角度，然后以此构成立方体；完当作之后的结果图，如图二；
- 5
然后我们节制一下容器的角度，算是间接的节制了整个 立体图的角度，然后我们可以看到，立体图加倍的真实；（注重 transition 这个属性）
- 6
之后就是节制实现过渡结果，用 ：hover 选择器实现鼠标悬停改变样式，图二的结果就可以实现，然后共同 transition 这个属性，添加过渡结果（属性放在了 容器container选择器内）
注重事项
- 小我进修事例，仅作分享；
- 注重浏览器的兼容性；
- 发表于 2018-04-29 00:00
- 阅读 ( 807 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章