css3 —— 扑克牌旋转/盾牌飞入
扑克牌旋转效果：
<!DOCTYPE html>
<html>
<head>
<title>扑克牌</title>
</head>
<style type="text/css">
*{
padding: 0px;
margin:0px;
}
.wrap{
width: 310px;
height: 438px;
/*background-color: red;*/
margin:200px auto;
position:relative;
}
img{
position:absolute;
left: 0px;
top: 0px;
transition: transform 1s;
transform-origin: right bottom;
}
.wrap:hover img:nth-child(4){
transform: rotate(60deg);
}
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
</style>
<body>
<div class="wrap">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
</div>
</body>
</html>
总结：
1.margin：0 auto；自适应居中
2.position:absolute; 绝对定位（不影响其他元素，根据left和top来确定位置）
注：默认坐标是页面左上角
3.position:relative; 相对定位
4.img:nth-child() 内部的第几张图片
5.transform:rotate(30deg); 旋转（deg角度）
6.transform-origin: right bottom; 旋转角度（right bottom; 右下角）
盾牌飞入效果：
<!DOCTYPE html>
<html>
<head>
<title>dun2</title>
</head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: skyblue;
}
.o{
width: 480px;
height: 494px;
/*background-color: red;*/
margin: 0 auto;
}
.o img{
transition: transform 1s;
}
.o img:nth-child(1){
transform: translate(-300px,200px) rotate(60deg);
}
.o img:nth-child(2){
transform: translate(-500px,400px) rotate(90deg);
}
.o img:nth-child(3){
transform: translate(300px,200px) rotate(60deg);
}
.o:hover img{
transform: none;
}
</style>
<body>
<div class="o">
<img src="images/shield_1_01.png">
<img src="images/shield_1_02.png">
<img src="images/shield_1_03.png">
<img src="images/shield_1_04.png">
<img src="images/shield_1_05.png">
<img src="images/shield_1_06.png">
<img src="images/shield_1_07.png">
<img src="images/shield_1_08.png">
<img src="images/shield_1_09.png">
</div>
</body>
</html>
总结：（再上一个的基础上）
transform: translate(x,y) 平移效果
transform: rotat （） 旋转效果
