纯CSS3实现常见多种相册效果

本文包含

1.CSS3中2D转换和3D转换的介绍。

2.在相册中的应用实例。

CSS3中的转换效果和动画效果十分强大好用，可以实现一些常见的动态效果。

如此一来，CSS3便可以代替许多jQuery的功能。

先来介绍一下CSS中的转换。

CSS3中转换有2D转换和3D转换之分。

2D转换(简单来说就是让某个元素改变大小和位置):

1.translate()方法

该方法包含两个参数，分别是对应的x轴，y轴偏移的距离(相对于控件的原位置进行移动)。

也可以根据translateX()方法单独设置x轴偏移量，translateY()方法设置Y轴偏移量。

2.rotate()方法

此方法包含一个参数，表示该空间以中心为圆心，顺时针转过的角度。可以为负值，表示逆时针转过的角度。

3.scale()方法

此方法包含两个参数，代表沿X轴和沿Y轴扩大的倍数。

4.skew()方法

skew()方法，该元素会根据X轴和Y轴线参数旋转给定的角度

5.matrix()方法

matrix方法将2D转换的方法合并为一个

matrix 方法有六个参数，包含旋转，缩放，移动和倾斜功能。

3D转换:

3D转换主要有一个方法。

rotateX(),rotateY(),rotateZ()。参数为一个角度值，分别围绕着X,Y,Z轴转相应的角度。

下面多介绍一个过渡属性transition:

transition：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。

接下来是一个纯CSS3转换效果做的相册例子

用到多种转换方法

HTML:

<body>
        <div class="d_photo">
            <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div>
            <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div>
            <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div>
            <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div>
            <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div>
        <div class="d_photo">
            <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div>
            <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div>
            <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div>
            <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div>
            <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div>
        </div>
    </body>

CSS：

　　　　　　　　　　　　　　body{
				width: 100%;
				background-image: url("img/bg.jpg") ;
			}
			.d_photo{
				width: 900px;
				height: 180px;
				margin-top: 10px;
				margin-left: auto;
				margin-right: auto;
			}
			.sig_photo{
				float: left;
				width: 150px;
				height: 150px;
				margin-top: 20px;
				margin-left: 20px;
			}
			img{
				width: 150px;
				height: 150px;
				-moz-transition: width 1s,height 1s,transform 1s;
				-webkit-transition: width 1s,height 1s,transform 1s;
			}
			#pic1{
				-moz-transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
			}
			#pic2{
				-moz-transform: rotate(-6deg);
				-webkit-transform: rotate(-6deg);
			}
			#pic3{
				-moz-transform: rotate(4deg);
				-webkit-transform: rotate(4deg);
			}
			#pic4{
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
			}
			#pic5{
				-moz-transform: rotate(6deg);
				-webkit-transform: rotate(-6deg);
			}
			#pic6{
				-moz-transform: rotate(-5deg);
				-webkit-transform: rotate(-5deg);
			}
			#pic7{
				-moz-transform: rotate(7deg);
				-webkit-transform: rotate(7deg);
			}
			#pic8{
				-moz-transform: rotate(4deg);
				-webkit-transform: rotate(4deg);
			}
			#pic9{
				-moz-transform: rotate(-4deg);
				-webkit-transform: rotate(-4deg);
			}
			#pic10{
				-moz-transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
			}
			#pic1:hover{
				width: 300px;
				height: 350px;
				z-index: 10;
				-moz-transform: rotate(360deg);
				-webkit-transform:rotate(360deg);
			}
			#pic2:hover{
				z-index: 10;
				-moz-transform: scale(1.15);
				-webkit-transform:scale(1.15);
			}
			#pic3:hover{
				width: 300px;
				height: 350px;
				z-index: 10;
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
			}
			#pic4:hover{
				-moz-transform: rotateY(180deg);
				-webkit-transform: rotateY(180deg);
				z-index: 10;
			}
			#pic5:hover{
				-moz-transform: rotateZ(180deg);
				-webkit-transform: rotateZ(180deg);
				z-index: 10;
			}
			#pic6:hover{
				-moz-transform: rotateX(180deg);
				-webkit-transform: rotateX(180deg);
				z-index: 10;
			}
			#pic7:hover{
				width: 300px;
				height: 350px;
				-moz-transform: translate(100px,-170px);
				-webkit-transform: translate(100px,-170px);
				z-index: 10;
			}
			#pic8:hover{
				width: 300px;
				height: 350px;
				z-index: 10;
				-moz-transform: translate(0px,-170px);
				-webkit-transform: translate(0px,170px);
			}

以上1-8每张图片，每张都是一种常用的转换方法，在此就不截图说明了，有兴趣可以试试。