溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3代碼如何實(shí)現(xiàn)圖形3d翻轉(zhuǎn)效果

發(fā)布時(shí)間：2023-01-06 09:34:03 來(lái)源：億速云 閱讀：108 作者：iii 欄目：開發(fā)技術(shù)

這篇“css3代碼如何實(shí)現(xiàn)圖形3d翻轉(zhuǎn)效果”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css3代碼如何實(shí)現(xiàn)圖形3d翻轉(zhuǎn)效果”文章吧。

代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
<title>css3 3d rotate</title> 
<style type="text/css"> 
body,div,ul,li{ 
padding:0; 
margin:0; 
} 
.container ul li { 
height: 180px; 
width: 180px; 
margin-right: 20px; 
margin-bottom: 20px; 
display: inline; 
-webkit-perspective: 1000px; 
-moz-perspective: 1000px; 
float: left; 
} 
.out_box{ 
position: relative; 
height: 180px; 
width: 180px; 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
transform-style: preserve-3d; 
-webkit-transition: 0.5s; 
-moz-transition: 0.5s; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
transition: 0.5s; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 
} 
.out_box div{ 
display: block; 
height: 180px; 
width: 180px; 
position: absolute; 
left: 0; 
top: 0; 
background: #060; 
text-align: center; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 
color:#FFF; line-height:180px; 
font-size:16px; 
} 
.out_box .front_box{ 
z-index: 2; 
} 
.out_box .back_box{ 
z-index: 1; 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
} 
.container ul li:hover .out_box{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
} .container ul li:hover .back_box{ z-index: 3; } 
</style> 
</head> 
<body> 
<div class="container"> 
<ul> 
<li> 
<div class="out_box"> 
<div class="front_box">front</div> 
<div class="back_box">back</div> 
</div> 
</li> 
<li> 
<div class="out_box"> 
<div class="front_box">front2</div> 
<div class="back_box">back2</div> 
</div> 
</li> 
<li> 
<div class="out_box"> 
<div class="front_box">front3</div> 
<div class="back_box">back3</div> 
</div> 
</li> 
</ul> 
</div> 
</body> 
</html>

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關(guān)于“css3代碼如何實(shí)現(xiàn)圖形3d翻轉(zhuǎn)效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手