旋转相册代码_css3制作酷炫的相册集动画

(给100素材网点亮★号，提升开发技能)

通过css3 style属性和svg代码制作酷炫的图片相册动画特效

特效说明：默认加载时图片黑白色倾斜重叠摆置，当鼠标悬浮于对应图片时图片显示彩色效果并有过度动画

box-shadow：设置图片阴影效果

transition：过度动画

transform-origin：设置旋转元素的基点位置

transform: rotate(deg)：图片倾斜角度值  

:first-child：伪类设置第一张图片倾斜角度

:last-child：伪类设置最后一张图片倾斜角度

filter：图片颜色滤镜效果

效果图：

html代码：

"cardfan">"florence.jpg" id="roma">"roma.jpg" id="aqueduct">"bike.jpg" id="bike">

svg代码：

svg代码用于处理图片颜色滤镜特效

"1.1" xmlns="http://www.w3.org/2000/svg">"blur">"3" />

"1.1" xmlns="http://www.w3.org/2000/svg">"greyscale">"matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />

"1.1" xmlns="http://www.w3.org/2000/svg">"sepia">

css代码：

div.cardfan { 
width: 33%;
margin: 2rem auto;
position: relative; 
}
div.cardfan img { 
position: absolute; 
width: 100%; 
height: auto; 
border: 12px solid #ffe; 
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); 
transform-origin: center 400px; 
transition: all 1s linear; 
}
div.cardfan img:first-child { 
transform: rotate(5deg);  
}
div.cardfan img:last-child { 
transform: rotate(-5deg); 
}
div.cardfan:hover img:first-child { 
transform: rotate(25deg); 
}
div.cardfan:hover img:last-child { 
transform: rotate(-25deg);  
}

img#aqueduct {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
img#aqueduct:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
filter: none;
}
img#bike {
-webkit-filter: sepia(100%);
filter: sepia(100%);
filter: url(#sepia);
background-color: #5E2612;
filter: alpha(opacity = 50);
}
img#bike:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
filter: alpha(opacity = 100);
filter: none;
}
img#roma {
-webkit-filter: blur(3px);
filter: blur(3px);
filter: url(#blur); 
}
img#roma:hover {
-webkit-filter: blur(0px);
filter: blur(0px);
filter: none;
}

代码在线演示：https://codepen.io/dudleystorey/pen/pKoqa