织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

Css3 创建三维立方体

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
Css3 创建三维立方体

在这个小教程中我将告诉你如何使用CSS3 -moz-transform/-webkit-transform属性 创建一个三维立方体小例子。本教程的实例可以运行在mozilla firefox,Chrome 以及Safari浏览器下。

Html 代码:

[html]UBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head
profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS 3D Cube</title>
<link rel="stylesheet" type="text/css" href="css/experiment.css">
</head>
<body>
<div id="wrapper">
<div id="experiment">
<div class="cube" align="center">

<!-- Face 1 -->


<!DOCTYPE HTML P
<div class="bottomFace">
<div>
<h2 align="right">Face 1</h2>
</div>
</div>
<!-- End Face 1 -->

<!-- Face 2 -->
<div class="topFace">
<div>
<h2>Face 2</h2>
</div>
</div>
<!-- End Face 2 -->

<!-- Face 3 -->
<div class="leftFace">
<h2>Face 3</h2>
</div>
<!-- End Face 3 -->

<!-- Face 4 -->
<div class="rightFace">
<h2>Face 4</h2>
</div>
<!-- End Face 4 -->

</div>
</div>
</div>
</body>
</html>
[/html]

Css代码 :

[css]
body
{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:#333;
background:#392306;
}
.cube {
position: relative;
top: 200px;
}

.cube h2
{
text-shadow:1px 0 1px #020A0F;
color:#B59354;
}

.bottomFace2,
.bottomFace,
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 140px;
height: 140px;
background: url('../noise.jpg');
color:white;
}

.bottomFace2,
.bottomFace,
.rightFace,
.leftFace,
.topFace {
position: absolute;
}

.bottomFace
{
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 210deg);
background:url('../noise.jpg');
left:159px;
top:-91px
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background: url('../noise.jpg');
color:white;
}

.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background: url('../noise.jpg');
left: 160px;
color:white;
opacity:0.5;
}

.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: 10px;
}

.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -126px;
left: 80px;
}

.cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
}

.cube div.topFace.video div {
background-color: #000;
color: #fff;
}
[/css]

(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容