css3动画小案例

　　今天与你们来分享一下我作的css3动画案例。

　　在展现个人案例以前先给你们说说实现这个案例所须要的一些属性。

　　transform 属性容许咱们对元素进行旋转、缩放、移动或倾斜。

　　经过 CSS3 2D转换，咱们可以对元素进行移动、缩放、转动、拉长或拉伸。

　　 translate()===>移动

 

　　　　translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

　　　　translate分为三种状况：

　　　　　　一、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

　　　　　　二、translateX(x)仅水平方向移动（X轴移动）

　　　　　　三、translateY(y)仅垂直方向移动（Y轴移动）

 

 

　　rotate()===》旋转

 

　　　　　rotate()方法，在一个给定度数顺时针旋转的元素。负值是容许的，这样是元素逆时针旋转。（单位：deg）

　　　　　 rotate(30deg);2D旋转    正角度-顺时针   负角度-逆时针

 

 

　　scale()===》缩放

　　　　scale()方法，该元素增长或减小的大小，取决于宽度（X轴）和高度（Y轴）的参数。

　　　　translate分为两种状况：

 

　　　　　　一、caleX(x)x轴扩大2倍
　　　　　　二、scaleY(y)y轴扩大2倍

 

　　skew()===》切斜

　　　　参数表示倾斜角度（单位：deg）

　　　　skew分为两种状况：

　　　　　　一、一个参数时：表示水平方向的倾斜角度；

　　　　　　一、两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

 

　　　　来看看我运用这些属性作的动画效果吧！

　　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>

 

　

 

　　　想看滑进图片有哪些效果么，本身快来试一试吧！