poker1.gif
1.屬性介紹
屬性transform：rotate();為讓圖片2D旋轉(zhuǎn)的屬性
下面為實(shí)現(xiàn)上面圖片的案例代碼
<!DOCTYPE html>
<html>
<head>
<title>旋轉(zhuǎn)</title>
<style type="text/css">
img{
margin: 100px;
transition: all 0.6s; /*過渡時(shí)間為0.6秒*/
<!-- 旋轉(zhuǎn)參考點(diǎn)： -->
/*transform-origin: center center; /*默認(rèn)值*/
/*transform-origin: top left;*/
/*transform-origin: 20px 30px;*/
}
img:hover{
transform: rotate(360deg); /*deg為旋轉(zhuǎn)度數(shù)*/
}
</style>
</head>
<body>
<img src="./pokerK.jpg" width="200" alt="">
<img src="./pokerJ.jpg" width="200" alt="">
<img src="./pokerQ.jpg" width="200" alt="">
</body>
</html>
2. 旋轉(zhuǎn)相冊(cè)
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 220px;
height: 310px;
position: relative;
border: 1px solid pink;
margin: 300px 300px;
float: left;
}
.div2{
margin: 300px 300px;
float: left;
}
.div2 img{
transform-origin: center center; /*右邊撲克中心旋轉(zhuǎn)*/
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right; /*左邊撲克繞右上角旋轉(zhuǎn)*/
}
/*下面為每張圖片設(shè)置需要旋轉(zhuǎn)的度數(shù)*/
div:hover img:nth-child(1){
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="./pokerJ2.jpg" alt="">
<img src="./pokerQ2.jpg" alt="">
<img src="./pokerK2.jpg" alt="">
<img src="./pokerJ.jpg" alt="">
<img src="./pokerQ.jpg" alt="">
<img src="./pokerK.jpg" alt="">
</div>
<div class="div2">
<img src="./pokerJ2.jpg" alt="">
<img src="./pokerQ2.jpg" alt="">
<img src="./pokerK2.jpg" alt="">
<img src="./pokerJ.jpg" alt="">
<img src="./pokerQ.jpg" alt="">
<img src="./pokerK.jpg" alt="">
</div>
</body>
</html>
效果圖：
Rpoker2.gif
如有錯(cuò)誤或建議歡迎大家指出與評(píng)論哈风题，希望這篇博文能幫助到大家，也可以分享給需要的人炸渡。
如需轉(zhuǎn)載梦皮，請(qǐng)注明出處。http://www.reibang.com/p/b3bb50430cdf
