利用CSS3制作簡(jiǎn)單的3d半透明立方體圖片展示
發(fā)布時(shí)間：2017-03-25 17:27:50 作者：66CCFFLXY 
我要評(píng)論
我要評(píng)論這篇文章主要給大家介紹了利用CSS3制作簡(jiǎn)單的3d半透明立方體圖片展示的相關(guān)資料，文中給出了完整的示例代碼，對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
效果圖如下：
示例代碼：
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8"/>
<style type="text/css">
//css部分
html{
font-size:62.5%;
}
img{
width:300px;
height:300px;
}
#stage{
//搭建一個(gè)舞臺(tái)
margin-top:200px;
margin-left:auto;
margin-right:auto;
width:300px;
height:300px;
perspective:1200px;
font-size:5em;
font-weight:bold;
color:#cc00ff;
}
.cube{
//cube是正方體
position:relative;
transform:rotateX(-45deg) rotateY(45deg);
transform-style:preserve-3d;
transition: all .6s;
}
.side{
color:blue;
text-align:center;
width:300px;
height:300px;
line-height:300px;
position:absolute;
background:#cc66ff;
opacity:0.5;
border:1px solid rgba(117,4,24,0.5);
}
//.front到.bottom是6個(gè)面分別進(jìn)行旋轉(zhuǎn)，構(gòu)建出正方體的整形
.front{
transform:translateZ(150px);
}
.back{
transform:rotateY(180deg) translateZ(150px);
}
.left{
transform:rotateY(-90deg) translateZ(150px);
}
.right{
transform:rotateY(90deg) translateZ(150px);
}
.top{
transform:rotateX(90deg) translateZ(150px);
}
.bottom{
transform:rotatex(-90deg) translateZ(150px);
}
#stage:hover .cube{
//設(shè)置鼠標(biāo)移上正方體時(shí)是否需要過渡效果以及過渡效果開始和結(jié)束的時(shí)間和速度
transform:rotateX(-45deg) rotateY(225deg);
transition:transform .6s;
}
</style>
</head>
<body>
<div id="stage">
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2.jpg" alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法
這篇文章主要介紹了純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-12CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法,實(shí)例分析了css使用filter:alpha控制半透明效果的技巧,需要的朋友可以參考下2015-05-09- 眾所周知，透明格式的PNG24在IE6透明部分將會(huì)被灰色替代.解決方法：用PNG8格式圖片替代PNG24格式的圖片,使用CSS濾鏡，插件等等2012-12-07
css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2021-04-13
