CSS3设计3D效果图
使用到CSS3中的变形、缩放、倾斜。
只写了兼容Gecto的。发张图片鼓励自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cube
{
position:fixed;
left:50%;
top:12px; }
.cube p
{
line-height:144px;
font-size:12px;
}
.cube h2
{
font-weight:bold;
}
.cube.one
{
top:200px;
left:50%;
margin-left:-200px;
} .topFace, .leftFace, .rightFace div /*统一三面的尺寸*/
{
width:272px;
height:262px;
padding:10px;
}
.topFace, .leftFace, rightFace /*统一三立面绝对定位*/
{
position:absolute;
}
.cube:hover .topFace, .cube:hover .leftFace, .cube:hover .rightFace
{
background:#ffc;
}
.cube:hover .topFace:hover, .cube:hover .leftFace:hover, .cube:hover .rightFace:hover
{
background:#ffa;
} .leftFace /*变形左边*/
{
-moz-transform:skew(0deg,30deg) scale(0.95,0.95);
background:#ccc;
top:85px;
left:-60px;
}
.rightFace
{
-moz-transform:skew(0deg,-30deg) scale(1,0.95); /*变形正面*/
background:#ddd;
position:absolute;
left:222px;
top:80px;
}
.topFace div /*变形顶面*/
{
-moz-transform:skew(0deg,-30deg) scale(1,1.16);
background:#eee;
font-size:0.862em;
}
.topFace
{
-moz-transform:rotate(60deg);
top:-150px;
left:115px;
}
</style>
</head>
<body>
<div class="cube one">
<div class="topFace">
<div>
<h2>顶面</h2>
<p><img src="data:images/oversea01.jpg"></p>
</div>
</div>
<div class="leftFace">
<div>
<h2>左面</h2>
<p><img src="data:images/oversea02.jpg"></p>
</div>
</div>
<div class="rightFace">
<div>
<h2>正面</h2>
<p><img src="data:images/oversea03.jpg"></p>
</div>
</div>
</div>
</body>
</html>