css3動畫小案例

　　今天與大家來分享一下我做的css3動畫案例。

　　在展示我的案例之前先給大家說說實現這個案例所需要的一些屬性。

　　transform 屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

　　通過 CSS3 2D轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

　　 translate()===>移動

 

　　　　translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

　　　　translate分為三種情況：

　　　　　　1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

　　　　　　2、translateX(x)僅水平方向移動（X軸移動）

　　　　　　3、translateY(y)僅垂直方向移動（Y軸移動）

 

 

　　rotate()===》旋轉

 

　　　　　rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。（單位：deg）

　　　　　 rotate(30deg);2D旋轉    正角度-順時針   負角度-逆時針

 

 

　　scale()===》縮放

　　　　scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數。

　　　　translate分為兩種情況：

 

　　　　　　1、caleX(x)x軸擴大2倍
　　　　　　2、scaleY(y)y軸擴大2倍

 

　　skew()===》切斜

　　　　參數表示傾斜角度（單位：deg）

　　　　skew分為兩種情況：

　　　　　　1、一個參數時：表示水平方向的傾斜角度；

　　　　　　1、兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

 

　　　　來看看我運用這些屬性做的動畫效果吧！

　　css

        *{
            margin: 0;
            padding: 0;
        }
        #box{
            border: 1px slateblue solid;
            width: 1000px;
            height: 600px;
            display: flex;
            margin-left: 200px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }
        #box>div{
            width: 300px;
            height: 150px;
            transition-duration: 3s;
        }
        #box>div>img{
            width: 100%;
            height: 100%;
        }
        #box>div:nth-child(1):hover{
            transform: translate(665px,200px);/*移動*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(2):hover{
            transform: skew(210deg);/*傾斜*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(3):hover{
            transform: rotateY(50deg);/*旋轉*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(4):hover{
            transform: rotateX(50deg);/*旋轉*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(5):hover{
            transform: scale(2);/*縮放*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(6):hover{
            transform: rotateZ(180deg);/*旋轉*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(7):hover{
            transform: rotateZ(180deg) translate(-333px,400px);/*旋轉並移動*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(8):hover{
            transform: rotateY(360deg);/*旋轉*/
            transition-property:all;
            transition-duration: 3s;
        }
        #box>div:nth-child(9):hover{
            transform: rotateX(360deg);/*旋轉*/
            transition-property:all;
            transition-duration: 3s;
        }

html:

<div id="box">
     <div><img src="img/3.jpg" alt=""/></div>
     <div><img src="img/4.jpg" alt=""/></div>
     <div><img src="img/6.jpg" alt=""/></div>
     <div><img src="img/2.jpg" alt=""/></div>
     <div><img src="img/7.jpg" alt=""/></div>
     <div><img src="img/3.jpg" alt=""/></div>
     <div><img src="img/4.jpg" alt=""/></div>
     <div><img src="img/6.jpg" alt=""/></div>
     <div><img src="img/2.jpg" alt=""/></div>
 </div>

 

　

 

　　　想看滑進圖片有哪些效果么，自己快來試一試吧！