:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>立体盒子</title>
<style type="text/css">
.cube {
position:fixed;
left:30%;
top:220px;
opacity:0.8;
}
.cube p {
line-height:24px;
font-size:12px;
}
.cube .one {
top:200px;
left:50px;
margin-left:-200px;
}
.rightFace, .leftFace, .topFace div {
padding:10px;
width:180px;
height:180px;
}
.rightFace, .leftFace, .topFace {
position:absolute;
}
.leftFace {
-webkit-transform:skew(0deg, 30deg);
-moz-transform:skew(0deg, 30deg);
background-color:#CCC;
}
.rightFace {
-webkit-transform:skew(0deg, -30deg);
-moz-transform:skew(0deg, -30deg);
background-color:#ddd;
left:200px;
}
.topFace div {
-webkit-transform:skew(0deg, -30deg) scale(1, 1.16);
-moz-transform:skew(0deg, -30deg) scale(1, 1.16);
background-color:#eee;
font-size:0.862em;
}
.topFace {
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
top:-158px;
left:100px;
}
.cube {
-webkit-transition: 1s;
}
.cube:hover {
-webkit-transform: scale(1.5);
}
img{
width:150px;}
</style>
</head>
<body>
<div class="cube one">
<div class="topFace">
<div>
<h2>顶面</h2>
<p><img src="images/pic1.jpg" /></p>
</div>
</div>
<div class="leftFace">
<h2>侧面</h2>
<p><img src="images/pic2.jpg" /></p>
</div>
<div class="rightFace">
<h2>正面</h2>
<p><img src="images/pic3.jpg" /></p>
</div>
</div>
</body>
</html>
Processed:
0.026, SQL:
9
