CSS可以實現很多有趣的效果,比如圖片翻轉滑動。通過使用CSS3的transition和transform屬性,我們可以輕松地實現這種效果。
.img-container { position: relative; width: 200px; height: 200px; } .img-container img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: transform .5s ease; } .img-container:hover img { transform: rotateY(180deg); }
以上代碼中,我們首先創建了一個圖片容器,它的寬高為200px。然后,我們給容器中的圖片使用了絕對定位,并設置了寬高為100%,讓圖片充滿整個容器。
接著,我們為圖片設置了一個過渡效果。當鼠標懸停在容器上時,我們使用transform屬性對圖片進行旋轉,使其在Y軸上翻轉了180度。
需要注意的是,使用這種方式實現圖片翻轉滑動,需要圖片有正反兩面,否則只有一面的圖片效果會很奇怪。
使用CSS實現圖片翻轉滑動,不僅實現起來簡單,而且效果十分酷炫。在實際開發中,我們可以將這種效果用于產品展示、相冊等場景中。
上一篇div 仿按鈕
下一篇div 內容垂直居中