|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于如何使用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>
<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>以上就是如何使用css實現翻轉圖片的效果(附代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!