關於Css3中的圖片旋轉問題
阿新 • • 發佈：2018-12-05
在CSS3中定義元素旋轉的方法，以下程式碼實現如何使元素在旋轉中實現元素具有雙面的效果
程式碼中用兩種方法實現了這個效果，註釋部分通過z-index控制圖片的顯示通過漸變使之在旋轉中實現交替達到一張圖片擁有兩個不同面的效果
第二種方法就是使用backface-visibility使圖片在旋轉後背面隱藏的效果實現兩張圖片的無縫連線達到效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin:0; padding: 0; } .container-1{ width: 900px; height: 400px; margin: 0 auto; /*background: yellow;*/ display: block; margin-top: 100px; position: relative; background: hotpink; } .img-1-1 { position: relative; width: 300px; height:300px; margin:0 auto; border-radius: 50%; } .img-1-1:before{ transition: 1s; content:""; display: block; width: 300px; height: 300px; border-radius: 50%; position: absolute; background: url(img/bg-1.png); transform: rotateY(180deg); backface-visibility: hidden; } .img-1-1:after{ transition: 1s; content:""; display: block; width: 300px; height: 300px; border-radius: 50%; background: url(img/bg-2.png); position: absolute; backface-visibility: hidden; } .img-1-1:hover:before{ transform: rotateY(0deg); } .img-1-1:hover:after { transform: rotateY(180deg); } /* .img-1-1 img { transition: 0.5s; display: block; width: 300px; height: 300px; border-radius: 50%; position: absolute; margin:0 auto; } .img-1-1>img:nth-of-type(1){ transform: rotateY(180deg); z-index: 0; } .container-1:hover .img-1-1>img:nth-of-type(1) { transform: rotateY(0deg); z-index: 1; } .container-1:hover .img-1-1>img:nth-of-type(2){ transform: rotateY(180deg); } */ </style> </head> <body> <div class="container-1"> <div class="img-1-1"> <!-- <img src="img/bg-1.png" > <img src="img/bg-2.png" > --> </div> </div> </body> </html>