<html>
<head>
<style type="text/css" id="css">
body,div{margin:0;padding:0;}
div#container{width:400px;height:400px;margin:0 auto;position:relative;background:#65bf21;-webkit-perspective:800px;-webkit-perspective-origin:50% 10%;}
div#container div{width:200px;height:200px;position:absolute;}
div#wrap{left:100px;top:100px;-webkit-transform-style:preserve-3d;-webkit-animation:test 10s infinite linear;opacity:0.8;}
div#wrap div{background:#cff;opacity:1;line-height:200px;font-size:100px;text-align:center;}
div#wrap div:nth-of-type(1){-webkit-transform:rotateX(0deg) translateZ(100px);}
div#wrap div:nth-of-type(2){-webkit-transform:rotateX(-90deg) translateZ(100px);}
div#wrap div:nth-of-type(3){-webkit-transform:rotateX(-180deg) translateZ(100px);}
div#wrap div:nth-of-type(4){-webkit-transform:rotateX(-270deg) translateZ(100px);}
div#wrap div:nth-of-type(5){-webkit-transform:rotateY(-90deg) translateZ(100px);}
div#wrap div:nth-of-type(6){-webkit-transform:rotateY(90deg) translateZ(100px);}
@-webkit-keyframes test
{
from{-webkit-transform:rotateX(0deg) rotateY(0deg);}
to{-webkit-transform:rotateX(-360deg) rotateY(-360deg);}
}
</style>
<script src="miaov.js"></script>
<script>
window.onload = function()
{
var oDiv = document.getElementById('wrap');
oDiv.onmousedown = function(ev)
{
var oEv = ev || window.event;
var initX = oEv.clientX;
var initY = oEv.clientY;
document.onmousemove = function(ev)
{
var oEv = ev || window.event;
var iTargetX = oEv.clientX - initX;
var iTargetY = oEv.clientY - initY;
oDiv.style.WebkitTransform = 'rotateX('+iTargetY+'deg) rotateY('+iTargetX+'deg)';
document.title = iTargetX+":"+iTargetY;
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="container">
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
|
-
立方体.png
(21.07 KB, 下载次数: 54)
css3立方体
|
收藏
淘帖
踩
