css3动画

  1. transition
  • animation:复杂变换
  • transiton:平滑过渡  过渡名称 过渡时间
    • -webkit-transtion:color 1s,height 2s;
    • 过渡模式
      • css3动画_第1张图片

  2. 3d场景

    • -webkit-perspective:800;
    • -webkit-perspective-origin:50% 50%;
    • -webkit-transform-style:-webkit-preserve-3d;
  •  transform变化
    • 拉伸translateX Y Z
    • 旋转rotateX Y Z
 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         .wrapper{
  8             -webkit-prespective: 800;
  9             -webkit-perspective-origin: 50% 50%;     创建3d可视窗口,800是深度,50%,50%是视角
 10         }
 11         .content{
 12             width: 300px;
 13             height: 300px;                宽高若不与正方体的宽高一致,正方体转动是会被div所挡住,改变位置。且会出现bug
 14             top: 150px;
 15         -webkit-transform-style: preserve-3d;     告诉浏览器下面的transform是3d的
 16         position: relative;   包含的div是绝对定位
 17         margin: 0 auto;    
 18          -webkit-transition: -webkit-transform .6s;  过渡动画
 19         
 20     }
 21         .swq{
 22             width: 300px;
 23             height: 300px;
 24             background: #584C56;
 25             color: white;
 26             text-align: center;
 27             font-size: 110px;
 28             line-height: 300px;
 29             height: 300px;
 30             position: absolute;
 31         
 32     
 33         }
 34 
 35         #swq1{                              div排布,右手定则判断坐标系
 36             -webkit-transform: translateZ(150px);
 37         
 38             }
 39         #swq2{
 40             -webkit-transform: translateX(150px) rotateY(90deg);
 41             }
 42         #swq3{
 43             -webkit-transform: translateZ(-150px) rotateX(-180deg);
 44 
 45             }
 46         #swq4{
 47             -webkit-transform: translateX(-150px) rotateY(-90deg);
 48             }
 49         #swq5{
 50             -webkit-transform: translateY(-150px) rotateX(90deg);
 51         
 52             }
 53 
 54         #swq6{
 55             -webkit-transform: translateY(150px) rotateX(90deg);
 56             }
 57 
 58     </style>
 59 </head>
 60 <body>
 61     <div class="wrapper">
 62         <div class="content" id="yu">
 63             <div id="swq1" class="swq">1</div>
 64             <div id="swq2" class="swq">2</div>
 65             <div id="swq3" class="swq">3</div>
 66             <div id="swq4" class="swq">4</div>
 67             <div id="swq5" class="swq">5</div>
 68             <div id="swq6" class="swq">6</div>
 69         </div>
 70         <button id="button1" onclick="push(this)"></button>
 71         <button id="button2" onclick="push(this)"></button>
 72         <button id="button3" onclick="push(this)"></button>
 73         <button id="button4" onclick="push(this)"></button>
 74     </div>
 75     <script type="text/javascript">
 76     
 77         var obj;
 78         var re=0;
 79         var de=0;
 80         function push(obj){
 81             var yu=document.getElementById('yu');
 82         switch(obj.id){
 83             case('button1'):
 84             re=re+90;
 85             yu.style.webkitTransform="rotateX("+re+"deg)";
 86             break;
 87             case('button2'):
 88             re=re-90;
 89             yu.style.webkitTransform='rotateX('+re+'deg)';
 90             break;
 91             case('button3'):
 92             de=de+90;
 93             yu.style.webkitTransform='rotateY('+de+'deg)';
 94             bdeak;
 95             case('button4'):
 96             de=de-90;
 97             yu.style.webkitTransform='rotateY('+de+'deg)';
 98             break;
 99         }
100         }
101         
102     </script>
103 </body>
104 </html>
View Code

    自动转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrapper{
            -webkit-prespective: 400;
            -webkit-perspective-origin: 0% 0%;
        }
        .content{
            width: 300px;
            height: 300px;
            top: 150px;
        -webkit-transform-style: preserve-3d;
        position: relative;
        margin: 0 auto;    
         -webkit-transition: -webkit-transform linear 1s;
        
    }
        .swq{
            width: 300px;
            height: 300px;
            background: #584C56;
            color: white;
            text-align: center;
            font-size: 110px;
            line-height: 300px;
            height: 300px;
            position: absolute;
        
    
        }

        #swq1{
            -webkit-transform: translateZ(150px);
        
            }
        #swq2{
            -webkit-transform: translateX(150px) rotateY(90deg);
            }
        #swq3{
            -webkit-transform: translateZ(-150px) rotateX(-180deg);

            }
        #swq4{
            -webkit-transform: translateX(-150px) rotateY(-90deg);
            }
        #swq5{
            -webkit-transform: translateY(-150px) rotateX(90deg);
        
            }

        #swq6{
            -webkit-transform: translateY(150px) rotateX(-90deg);
            }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content" id="yu">
            <div id="swq1" class="swq">1</div>
            <div id="swq2" class="swq">2</div>
            <div id="swq3" class="swq">3</div>
            <div id="swq4" class="swq">4</div>
            <div id="swq5" class="swq">5</div>
            <div id="swq6" class="swq">6</div>
        </div>
        <button id="button1" onclick="down()"></button>
        <button id="button2" onclick="up()"></button>
    </div>
    <script type="text/javascript">
    
        var obj;
        var re=0;
        var de=0;
        var he=0;
        function down(){
                                        newtime = setInterval("push()",81)
                                    }
        function up(){
            clearInterval(newtime)
        }
        function push(){
            var yu=document.getElementById('yu');
            // a=Math.floor(Math.random()*11);
            a=1;
            e=Math.random()
            var b=Math.random();
            // if(b>0.5){b=1}else{b=-1};
            // var c=Math.random();
            // if(c>0.5){c=1}else{c=-1};
            // var d=Math.random();
            // if(d>0.5){d=1}else{d=-1};
            de=de+a/10;
            re=de+a/10;
            he=de+a/10;

            if(e<.33){
            yu.style.webkitTransform="rotate3D("+de+", 0     ,"+he+", 900deg)";
            }else if(e<0.66){
            yu.style.webkitTransform="rotate3D(0     , "+re+",."+he+", 900deg)";
            }else{
            yu.style.webkitTransform="rotate3D("+de+", "+re+", 0     , 900deg)";            
            }
            
        
        }
    
        
    </script>
</body>
</html>
View Code

  用border width属性 制造出折角效果css3动画_第2张图片  红色是显示内容的,css3动画_第3张图片

box-sizing:border-box;选择border框作为外边界;

你可能感兴趣的:(css3动画)