css3D动画

头像
酷酷的long
    阅读 19 分钟

    前言

    本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

    属性

    perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

    perspective-origin: 设置透视点的位置

    transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

    图视点

    一、写一个简单的立方体

    1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。

    <div class="mofang">
    <div class="box mian1">1</div>
    <div class="box mian2">2</div>
    <div class="box mian3">3</div>
    <div class="box mian4">4</div>
    <div class="box mian5">5</div>
    <div class="box mian6">6</div>
</div>

    2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换

    .mofang{
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    perspective: 3000px;
    perspective-origin:-100% -150%;
    transform-style: preserve-3d;
}

    注：视距越小图形越大，反之越小

    3.子元素全部绝对定位

    .box{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid black;
    position: absolute;            
}

    4.开始调整6个子元素的位置

    .mian1{
     background:  rgba(255, 255, 0, 0.3);
    transform:  translateY(50px) rotateX(90deg);
}

    效果图如下：

    图1

    5.一个面写好之后，将其余的面都调整好

    /*后*/
.mian1{
    transform: translateZ(-50px);
}
/*上*/
.mian2{
    transform: translateY(-50px) rotateX(90deg);
}
/*左*/
.mian3{
    transform: translateX(-50px) rotateY(90deg);
}
/*前*/
.mian4{
    transform: translateZ(50px);
}
/*右*/
.mian5{
    transform: translateX(50px) rotateY(90deg);
}
/*下*/
.mian6{
    transform: translateY(50px) rotateX(90deg);
}

    效果图如下：

    图2

    css3D动画可以实现很多效果

    下面是我写的一些3D动画效果

    demo01

    html

    <div class="wutai">
            
            <div class="mofang">
                
                <div class="box mian1">
                    <div class="box1">1</div>
                    <div class="box1">2</div>
                    <div class="box1">3</div>
                    <div class="box1">4</div>
                    <div class="box1">5</div>
                    <div class="box1">6</div>
                    <div class="box1">7</div>
                    <div class="box1">8</div>
                    <div class="box1">9</div>
                </div>
                
                <div class="box mian2">
                    <div class="box2">1</div>
                    <div class="box2">2</div>
                    <div class="box2">3</div>
                    <div class="box2">4</div>
                    <div class="box2">5</div>
                    <div class="box2">6</div>
                    <div class="box2">7</div>
                    <div class="box2">8</div>
                    <div class="box2">9</div>
                </div>
                
                <div class="box mian3">
                    <div class="box3">1</div>
                    <div class="box3">2</div>
                    <div class="box3">3</div>
                    <div class="box3">4</div>
                    <div class="box3">5</div>
                    <div class="box3">6</div>
                    <div class="box3">7</div>
                    <div class="box3">8</div>
                    <div class="box3">9</div>
                </div>
                
                <div class="box mian4">
                    <div class="box4">1</div>
                    <div class="box4">2</div>
                    <div class="box4">3</div>
                    <div class="box4">4</div>
                    <div class="box4">5</div>
                    <div class="box4">6</div>
                    <div class="box4">7</div>
                    <div class="box4">8</div>
                    <div class="box4">9</div>
                </div>
                
                <div class="box mian5">
                    <div class="box5">1</div>
                    <div class="box5">2</div>
                    <div class="box5">3</div>
                    <div class="box5">4</div>
                    <div class="box5">5</div>
                    <div class="box5">6</div>
                    <div class="box5">7</div>
                    <div class="box5">8</div>
                    <div class="box5">9</div>
                </div>
                
                <div class="box mian6">
                    <div class="box6">1</div>
                    <div class="box6">2</div>
                    <div class="box6">3</div>
                    <div class="box6">4</div>
                    <div class="box6">5</div>
                    <div class="box6">6</div>
                    <div class="box6">7</div>
                    <div class="box6">8</div>
                    <div class="box6">9</div>
                </div>
                
                
            </div>

    css

    <style type="text/css">
            html,body{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .wutai{
                width: 100%;
                height: 100%;
                border: 1px solid black;
                /* background: black; */
                margin: 0 auto;
            }
            .mofang{
                width: 100px;
                height: 100px;
                
                /* perspective: 2500px;
                perspective-origin:-500% -550%; */
                
                transform-style: preserve-3d;
                animation: texiao 10s linear infinite alternate;
            }
            
            .box{
                width: 90px;
                height: 90px;
                margin: 100px;
                text-align: center;
                line-height: 30px;
                display: grid;
                grid-template-columns: 30px 30px 30px;
                grid-template-rows:30px 30px 30px;
                
                position: absolute;
                
            }
            .box .box1{
                border: 1px solid white;
                background: #AACCEE;
            }
            .box .box2{
                border: 1px solid white;
                background: #FF9966;
            }
            .box .box3{
                border: 1px solid white;
                background: #00FFFF;
            }
            .box .box4{
                border: 1px solid white;
                background: #FF0000;
            }
            .box .box5{
                border: 1px solid white;
                background: #FFFF00;
            }
            .box .box6{
                border: 1px solid white;
                background: blueviolet;
            }
            
            /* 后*/
            .mian1{
                transform: translateZ(-45px);
            }
            /* 左*/
            .mian2{
                transform: translateX(-45px) rotateY(90deg);
            }
            /* 上*/
            .mian3{
                transform: translateY(-45px) rotateX(90deg);
            }
            /* 右*/
            .mian4{
                transform: translateX(45px) rotateY(90deg);
            }
            /* 下*/
            .mian5{
                transform: translateY(45px) rotateX(90deg);
            }
            /* 前*/
            .mian6{
                transform: translateZ(45px);
            }
            
            
            @keyframes texiao{
                0%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
                50%{transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(90deg);}
                100%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
            }
        </style>

    魔方效果

    图魔方

    demo02

    html

    <div class="wutai">
            <div class="mofang">
                <div class="box mian1">1</div>
                <div class="box mian2">2</div>
                <div class="box mian3">3</div>
                <div class="box mian4">4</div>
                <div class="box mian5">5</div>
                <div class="box mian6">6</div>
                
                <div class="xiaomofang">
                    <div class="box1 mian7">7</div>
                    <div class="box1 mian8">8</div>
                    <div class="box1 mian9">9</div>
                    <div class="box1 mian10">10</div>
                    <div class="box1 mian11">11</div>
                    <div class="box1 mian12">12</div>
                </div>
            </div>
        </div>

    css

    <style type="text/css">
            .wutai{
                width: 700px;
                height: 500px;
                border: 1px solid black;
                background: black;
                margin: 0 auto;
                
                /*******/
                perspective: 3000px;
                perspective-origin:-100% -150%;
                /******/
            }
            .mofang{
                width: 100px;
                height: 100px;
                position: absolute;
                top: calc(50% - 50px);
                left: calc(50% - 50px);
                
                /******/
                perspective: 3000px;
                perspective-origin:-100% -150%;
                
                transition: all 500s linear;
                transform-style: preserve-3d;
                /******/
            }
            .box{
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                /* color: white; */
                font-size: 20px;
                font-weight: bold;
                background: rgba(0,0,0,0.5);
                border: 2px solid black;
                position: absolute;
                
                /******/
                transition: all 10s linear;
                /******/
            }
            
        
            .mian1{
                transform: translateZ(-50px);
            }
            
            .mian2{
                transform: translateY(-50px) rotateX(90deg);
            }
        
            .mian3{
                transform: translateX(-50px) rotateY(90deg);
            }
        
            .mian4{
                transform: translateZ(50px);
            }
        
            .mian5{
                transform: translateX(50px) rotateY(90deg);
            }
        
            .mian6{
                transform: translateY(50px) rotateX(90deg);
            }
            
            .xiaomofang{
                width: 50px;
                height: 50px;
                position: absolute;
                top: calc(50% - 25px);
                left: calc(50% - 25px);
                
                perspective: 3000px;
                perspective-origin:-100% -150%;
                
                /******/
                transform-style: preserve-3d;
                transition: all 100s linear;
                /******/
            }
            
            .box1{
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                font-weight: bold;
                background: rgba(255,255,255,0.2);
                border: 2px solid black;
                
                transform-style: preserve-3d;
                
                position: absolute;
            }
        
            .xiaomofang .mian7{
                transform: translateZ(-27px);
            }
            
            .xiaomofang .mian8{
                transform: translateY(-27px) rotateX(90deg);
            }
        
            .xiaomofang .mian9{
                transform: translateX(-27px) rotateY(90deg);
            }
            
            .xiaomofang .mian10{
                transform: translateZ(27px);
            }
            
            .xiaomofang .mian11{
                transform: translateY(27px) rotateX(90deg);
            }
            
            .xiaomofang .mian12{
                transform: translateX(27px) rotateY(90deg);
            }
            
            
            .mofang:hover .mian1{
                transform: translateZ(-170px);
                background: #00FFFF;
                opacity: 0.7;
                color: white;
            }
            .mofang:hover .mian2{
                transform: translateY(-170px) rotateX(90deg);
                background: #AACCEE;
                opacity: 0.7;
                color: white;
            }
            .mofang:hover .mian3{
                transform: translateX(-170px) rotateY(90deg);
                background: #DCDCDC;
                opacity: 0.7;
                color: white;
            }
            .mofang:hover .mian4{
                transform: translateZ(170px);
                background: #FF0000;
                opacity: 0.7;
                color: white;
            }
            .mofang:hover .mian5{
                transform: translateX(170px) rotateY(90deg);
                background: #FFD700;
                opacity: 0.7;
                color: white;
            }
            .mofang:hover .mian6{
                transform: translateY(170px) rotateX(90deg);
                background: #FF00FF;
                opacity: 0.7;
                color: white;
            }
            
            .mofang:hover{
                transform: rotateX(36000deg);
            }
            
            .mofang:hover .xiaomofang{
                transform: rotateX(9000deg) rotateY(18000deg) rotateZ(36000deg);
            }        
        </style>

    多重立体图

    图片描述

    demo03

    html

    
<div class="wutai">
        
            <div class="yuanzhu">
                <div class="box mian1">1</div>
                <div class="box mian2">2</div>
                <div class="box mian3">3</div>
                <div class="box mian4">4</div>
                <div class="box mian5">5</div>
                <div class="box mian6">6</div>
                <div class="box mian7">7</div>
                <div class="box mian8">8</div>
                <div class="box mian9">9</div>
                <div class="box mian10">10</div>
                <div class="box mian11">11</div>
                <div class="box mian12">12</div>
            </div>
        </div>

    css

    <style>
            .wutai{
                width: 900px;
                height: 600px;
                border: 1px solid;
                margin: 0px auto;
        
                perspective: 1000px;
                perspective-origin: 50% 1%;
            }
            
            .wutai .yuanzhu{
                width: 100px;
                height: 300px;
                margin: 0 auto;
                position: relative;
                top: 150px;
                border: 0px solid red;
        
                transform-style: preserve-3d;
            }
        
            .yuanzhu:hover{
                transform: rotateY(36000000deg);
                transition: all 1000000s linear;
               
            }
        
            .wutai .yuanzhu .box{
                width: 100px;
                height:300px;
                text-align: center;
                line-height: 300px;
                font-size: 40px;
                color: white;
                position: absolute;
            }
        
            .mian1{
                background: red;
                transform: rotateY(30deg) translateZ(200px) ;
            }
            .mian2{
                background: orange;
                transform: rotateY(60deg) translateZ(200px);
            }
            .mian3{
                background: yellow;
                transform: rotateY(90deg) translateZ(200px);
            }
            .mian4{
                background: green;
                transform: rotateY(120deg) translateZ(200px);
            }
            .mian5{
                background: cyan;
                transform: rotateY(150deg) translateZ(200px);
            }
            .mian6{
                background: blue;
                transform: rotateY(180deg) translateZ(200px);
            }
            .mian7{
                background: purple;
                transform: rotateY(210deg) translateZ(200px);
            }
            .mian8{
                background: blue;
                transform: rotateY(240deg) translateZ(200px);
            }
            .mian9{
                background: cyan;
                transform: rotateY(270deg) translateZ(200px);
            }
            .mian10{
                background: green;
                transform: rotateY(300deg) translateZ(200px);
            }
            .mian11{
                background: yellow;
                transform: rotateY(330deg) translateZ(200px);
            }
            .mian12{
                background: orange;
                transform: rotateY(360deg) translateZ(200px);
            }
        
        </style>

    圆柱效果

    图片描述

    demo04

    html

    <div class="wutai">
            
            <div class="chilun one">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            
            <div class="chilun two">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            
            <div class="chilun3 three">
                <div class="box1"></div>
                <div class="box1"></div>
                <div class="box1"></div>
                <div class="box1"></div>
                <div class="box1"></div>
                <div class="box1"></div>
            </div>
            
        </div>

    css

    <style type="text/css">
            html,body,div{
                margin: 0;
                padding: 0;
            }
            .wutai{
                width: 700px;
                height: 500px;
                border: 1px solid black;
                margin: 0 auto;
                position: relative;
            }
            
            .chilun{
                width: 60px;
                height: 60px;
                background: black;
                border-radius: 50%;
                position: absolute;
            }
            
            .chilun3{
                width: 120px;
                height: 120px;
                background: black;
                border-radius: 50%;
                position: absolute;
            }
            
            .one{
                top: 47px;
                left: 53px;
                animation: xuanzhuan 1.5s linear infinite;
            }
            .two{
                top:97px;
                left: 104px;
                animation: xuanzhuan2 1.5s linear infinite;
            }
            .three{
                top: 102px;
                left: 173px;
                animation: xuanzhuan3 3s linear infinite;
            }
            @keyframes xuanzhuan{
                0%{transform: rotate(0deg);}
                100%{transform: rotateZ(360deg);}
            }
            @keyframes xuanzhuan2{
                0%{transform: rotate(0deg);}
                100%{transform: rotateZ(-360deg);}
            }
            @keyframes xuanzhuan3{
                0%{transform: rotate(0deg);}
                100%{transform: rotateZ(360deg);}
            }
            
            .box{
                width: 16px;
                height: 80px;
                background: black;
                position: absolute;
                left: calc(50% - 8px);
                top: calc(50% - 40px);
            }
            .box:nth-child(2){
                transform: rotateZ(60deg);
            }
            .box:nth-child(3){
                transform: rotateZ(120deg);
            }
            .box1{
                width: 16px;
                height: 140px;
                background: black;
                position: absolute;
                left: calc(50% - 8px);
                top: calc(50% - 70px);
            }
            .box1:nth-child(2){
                transform: rotateZ(30deg);
            }
            .box1:nth-child(3){
                transform: rotateZ(60deg);
            }
            .box1:nth-child(4){
                transform: rotateZ(90deg);
            }
            .box1:nth-child(5){
                transform: rotateZ(120deg);
            }
            .box1:nth-child(6){
                transform: rotateZ(150deg);
            }
        </style>

    齿轮效果
    图片描述

    如果文中有不妥或者错误的地方还望高手的您指出，以免误人子弟。

    如果您有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。

    vx:bsl521921

    csshtml5
    酷酷的long
    27 声望2 粉丝
    « 上一篇
    过渡和动画
    下一篇 »
    javascript 数组排序（sort,冒泡）

    引用和评论

    推荐阅读
    头像
    基础数组 数组合并交叉

    酷酷的long赞 1阅读 2k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.1k评论 2

    0 条评论
    得票最新