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团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

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

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新