CSS 实例之翻转图片
生活随笔
收集整理的這篇文章主要介紹了
CSS 实例之翻转图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
具體效果圖如下：
主要用到的技術除了3D翻轉和定位 ，還用到了一個新的屬性?backface-visibility：visable|hidden;
該屬性主要是用來設定元素背面是否可見。
具體的步驟如下：
1、寫出頁面主體，
<div><img src="Images/b.jpg" alt=""><img src="Images/c.jpg" alt=""></div>2、通過定位使兩張圖片疊加在一起
div img {width: 250px;height: 170px;position: absolute;top: 0;left: 0;transition: all 1s;}3、設置第一張圖片背面不可見
div img:first-child {z-index: 1;backface-visibility: hidden;}4、添加旋轉180度
div:hover img {transform: rotateY(180deg);}最后給出完整代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* backface-visibility */div {width: 250px;height: 170px;margin: 100px auto;position: relative;}div img {width: 250px;height: 170px;position: absolute;top: 0;left: 0;transition: all 1s;}div img:first-child {z-index: 1;backface-visibility: hidden;}div:hover img {transform: rotateY(180deg);}</style> </head><body><div><img src="Images/b.jpg" alt=""><img src="Images/c.jpg" alt=""></div> </body></html> View Code?
轉載于:https://www.cnblogs.com/Assist/p/9685391.html
總結
以上是生活随笔為你收集整理的CSS 实例之翻转图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Selenium | 网上教程
- 下一篇： css文字下滑,CSS3 文本下落渐变动