CSS3的开门效果
CSS3的开门效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>旋转的狗狗</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 border: 1px solid blue; 11 overflow: hidden; 12 /*如果希望看到3D效果，则需要在父级元素添加一个perspective*/ 13 perspective: 300px; 14 } 15 img{ 16 transform-origin: left; 17 transition: all 2s; 18 } 19 img:hover{ 20 /*transform: rotateX(180deg); 21 transform: rotateY(180deg);*/ 22 transform: rotateY(45deg); 23 } 24 </style> 25 </head> 26 <body> 27 28 </body> 29 <div><img src="./logo/gougou.jpg" alt=""></div> 30 </html>
