css3D+动画的示例分析
这篇文章给大家分享的是有关css3D+动画的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站主要从事网站制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务龙泉驿,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-origin,transform, perspective。
写一个简单的立方体
1、我们先用css实现一个长方体,一个长方体有6个边,我们写6个li,并用一个ul包裹起来,根据我写3D动画的经验,最好有一个父元素来包裹
- 1
- 2
- 3
- 4
- 5
- 6
2、先给.parent设置宽高,并且给他设置视距和基点位置。
.parent{ width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; perspective: 2000px; perspective-origin: -40% -80%; background: #000; }
3、给ul设置宽高以及preserve-3d属性保留子元素3d转换,子元素li全部绝对定位
ul{ width: 50px; position: relative; margin: 100px auto; transform-style : preserve-3d; } li{ width: 100px; height: 100px; background: rgba(255, 255, 0, 0.3); position: absolute; text-align: center; border: 3px solid greenyellow; }
效果如下图所示:
4、先写一个面,给他的背景设置 background: rgba(255, 255, 0, 0.3);
li:nth-child(1){ background: rgba(255, 255, 0, 0.3); transform: translateY(50px) rotateX(90deg); }
效果如下图所示:
5、我们写好了第一个面,然后我们在将其他6个面调整好,变成下图所示。关于rotate的旋转方向这里不解释,不懂的朋友可以自行查看其他文档。
/*上面*/ li:nth-child(1){ transform: translateY(-50px) rotateX(90deg); } /*下面*/ li:nth-child(2){ transform: translateY(50px) rotateX(90deg); } /*左面*/ li:nth-child(3){ transform: translateX(-50px) rotateY(90deg); } /*右面*/ li:nth-child(4){ transform: translateX(50px) rotateY(90deg); } /*前面*/ li:nth-child(5){ transform: translateZ(50px); } /*后面*/ li:nth-child(6){ transform: translateZ(-50px); }
效果如下图所示:
下面是两种css3D+动画的效果
1、代码如下:
书页2
2、代码如下:
立方体
效果如下图:
感谢各位的阅读!关于“css3D+动画的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
名称栏目:css3D+动画的示例分析
路径分享:http://scyanting.com/article/pohogo.html