3D动画效果

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

一。animation动画简介

关键帧 例如：

    @keyframes spread { 
           0% {width:0;}     
           33% {width:23px;}  
           66% {width:46px;} 
           100% {width:69px;} 
               }
               

①。写兼容的时候浏览器前缀是放在@keyframes中间

例如：@-webkit-keyframes（兼容谷歌）、@-moz-keyframes（兼容火狐）

②。animation-name 由@keyframes创建的动画名称

animation–duration 过渡时间

animation-timing-function 过渡方式

animation-delay 延迟时间

animation-iteration-count 动画的播放次数 值通常为整数，默认值为1，（可不写默认值）， 特殊值infinite，表示动画无限次播放

animation-direction 动画的播放方向

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

    div {
        width: 50px;
        height: 50px;
        background: yellow;
        animation: donghua 4s linear .5s infinite alternate;
        运行时间为4s，匀速运行，延迟0.5s，无限循环播放，偶数向前播放
    }

    /* 兼容谷歌 */
    @-webkit-keyframes donghua {
        0% {
            width: 50px;
            height: 50px;
            background: yellow;
        }

        50% {
            width: 150px;
            height: 150px;
            background: red;
        }

        100% {
            width: 250px;
            height: 250px;
            background: blue;
        }
    }

二。

想实现3d效果必须要在父元素上加上一个属性perspective

body{ 透视 也可以理解为视距 可以理解为 眼睛距离物体的距离 距离物体越近 物体就越大，距离物体越远 物体就越小 perspective:500px;
}

①。

body{
        perspective:500px ;
        视距为500px
    }
    div{
        width: 200px;
        height: 200px;
        background: red;
        margin: 50px auto;
     transition: all 2s;
       }
      div:hover{
        transform: translate3d(0,0,200px);
        也可以写成，效果一样
     transform: translateZ(200px);
    }

②。rotateX是绕着x轴旋转 可以想象单杠运动员在单杆上下翻转 正值是向里面旋转 负值是向外面旋转 可以参照左手握拳 拇指向右 其他4个手指弯曲的方向就是正值

transform: rotateX(30deg),可以理解为一个笔直的大树，从大树顶部顺时针向底部旋转

transform: rotateX(-30deg),可以理解为一个笔直的大树，从大树顶部逆时针向底部旋转

transform: rotateY(-30deg)，可以理解为两个人，水平站在同一条直线上，A逆时针向B旋转

transform: rotateY(30deg)，可以理解为两个人，水平站在同一条直线上，A顺时针向B旋转

transform: rotateZ(30deg),可以理解为钟表，顺时针旋转

transform: rotateZ(30deg),可以理解为钟表，逆时针旋转

三。

如果想让子元素有3d的效果， 必须要给父元素设置transform-style ， transform-style默认值是flat ，想变成3d效果要把值设置成preserve-3d transform-style:preserve-3d;

body{
        perspective: 600px;
   transform-style: preserve-3d;
    }
    .a,.b{
        width: 200px;
        height: 200px;
        position: absolute;
        left: 200px;
        top: 200px;
       transition: all 2s ;
     }
    .a{
        background: red;
        
    }
    .b{
        background: yellow;
      }
    .b:hover{
        transform: rotateX(90deg);
        transform-origin: bottom;
    }