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

CSS3实现3D立方体旋转效果

2014-12-01 11:15 295 查看

使用CSS3实现3D立方体选择效果，效果如下：

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#divs{
-webkit-perspective:500;
-webkit-perspective-origin:50% 50%;
overflow:hidden;
margin-top:100px;
}

#group{
height:250px;
width:250px;
position:relative;
margin:auto;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}

.d{
height:100px;
width:100px;
position:absolute;
background:#f0f;
color:#FFFFFF;
font-weight:bold;
text-align:center;
line-height:100px;
font-size:100px;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
}

#d2{
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
background:#00f;
}

#d3{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
background:#f00;
}

#d4{
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
background:#0ff;
}

#d5{
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
background:#ff0;
}

#d6{
-webkit-transform:translateZ(-100px);
background:#0e0;
}

#handler{
margin:auto;
font-weight:bold;
width:700px;
}

.rotate{
width:100%;
}

</style>
<script type="text/javascript">
function onRotate(){
var x=document.getElementById("rangX").value;
var y=document.getElementById("rangY").value;
var z=document.getElementById("rangZ").value;

document.getElementById("group").style.webkitTransform="rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

document.getElementById("handleX").innerText=x;
document.getElementById("handleY").innerText=y;
document.getElementById("handleZ").innerText=z;
}
</script>
</head>
<body>
<div id="divs">
<div id="group">
<div class="d" id="d1">1</div>
<div class="d" id="d2">2</div>
<div class="d" id="d3">3</div>
<div class="d" id="d4">4</div>
<div class="d" id="d5">5</div>
<div class="d" id="d6">6</div>
</div>
</div>

<div id="handler">
<p>rotateX:<span id="handleX">0</span>deg</p>
<input type="range" min="-360" max="360" value="0" id="rangX" class="rotate" onchange="onRotate()"/>
<p>rotateY:<span id="handleY">0</span>deg</p>
<input type="range" min="-360" max="360" value="0" id="rangY" class="rotate" onchange="onRotate()"/>
<p>rotateZ:<span id="handleZ">0</span>deg</p>
<input type="range" min="-360" max="360" value="0" id="rangZ" class="rotate" onchange="onRotate()"/>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航