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、代码如下：

效果如下图：

感谢各位的阅读！关于“css3D+动画的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网页名称：css3D+动画的示例分析
文章URL：http://mswzjz.cn/article/pohogo.html