您的位置：首页 > Web前端 > CSS

css3 3D效果

2012-08-30 17:36 253 查看

最好在webkit内核的浏览器下运行，效果最佳

firefox下运行效果：

按 right，left，up，down键效果图

在safari浏览器下运行效果：

按 right，left，up，down键效果图

源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>3D CSS cube, use arrow keys to rotate</title>
<meta name="author" content="" />

<style>
#experiment {
background-color:gray;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 75%;
-moz-perspective: 200;
-moz-perspective-origin: 50% 200px;
}

#cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 1s linear;
-moz-transform-style: preserve-3d;
}

.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #fff;
border-radius: 3px;
}

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
}

#cube .two {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
}

#cube .three {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
}

#cube .four {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
}

#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
}

#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
}
</style>

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="experiment">
<div id="wrapper">
<p id="learn">
This is a demo,
<a
href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/">
learn how it works</a>.
</p>

<div id="experiment">
<div id="cube">
<div class="face one">
One face
</div>
<div class="face two">
Two face
</div>
<div class="face three">
Three face
</div>
<div class="face four">
Four face
</div>
<div class="face five">
Five face
</div>
<div class="face six">
Six face
</div>
</div>
</div>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var props = 'transform WebkitTransform MozTransform OTransform msTransform'
.split(' '), prop, el = document.createElement('div');

for ( var i = 0, l = props.length; i < l; i++) {
if (typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}

var xAngle = 0, yAngle = 0;
$('body').keydown(
function(evt) {
switch (evt.keyCode) {
case 37: // left
yAngle -= 90;
break;

case 38: // up
xAngle += 90;
break;

case 39: // right
yAngle += 90;
break;

case 40: // down
xAngle -= 90;
break;
}
;
document.getElementById('cube').style[prop] = "rotateX("
+ xAngle + "deg) rotateY(" + yAngle + "deg)";
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航