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

CSS3 3D效果实现一个可旋转的正方体

2015-07-24 00:14 771 查看

前提知识：

1.Transition（过渡）（W3C文档http://www.w3.org/TR/css3-transitions/）

　　属性：

transition-property 要应用过渡的css属性

transition-duration 过渡发生的时长

transition-timing-function 过渡过程速度变化的设置

可设置值:

linear(匀速）ease（缓慢开始，缓慢结束。默认） ease-in（缓慢开始） ease-out（缓慢结束） ease-in-out（缓慢开始，缓慢结束，但与ease速度不同）

transition-delay 过渡何时开始

transition 以上属性简写

　　使用：

　　不同浏览器需要在属性前加前缀：chrome、Safari 需要加 -webkit-，Firefox前缀-moz-，IE前缀-ms-，Opera前缀-o-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#block{
width:400px;
height:400px;
background-color: #69c;
margin:0 auto;
-webkit-transition: background-color 3s;
}
#block:hover{
background-color: red;;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html>

2.Transform（转换）（W3C文档http://www.w3.org/TR/css3-3d-transforms/）

　　属性：

　　perspective：建立3D场景，实现透视效果，值为物品与屏幕距离

　　perspective-origin：子元素在视图中的位置，X和Y值表示（注意：perspective和perspective-origin都要在实现3D效果元素的父元素中设置）

　　transform-style：规定如何在 3D 空间中呈现被嵌套的元素（可设置为flat或preserve-3d）

　　transform-origin：旋转中心

　　　　X轴可设置为：left | center | right

　　　　Y轴可设置为：top | center | bottom

　　　　Z轴设置在Z轴上的位置：length px

　　本例中用到的方法有translateX（px），translateY，translateZ，表示在XYZ轴上移动和rotateX（deg），rotateY，rotateZ绕XYZ轴旋转。

一个类似日历的实现：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#experiment{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;

overflow: hidden; /*不能写在#pagegroup，否则page显示为2D效果*/
}
#pagegroup{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform-style:preserve-3d;
position: relative;
}
.page{
width: 360px;
height: 360px;
padding: 20px;
background-color: black;
color: white;
font-weight: bold;
font-size: 360px;
line-height: 360px;
text-align: center;

position: absolute;
}
#page1,#page2,#page3,#page4,#page5{
-webkit-transform-origin:top;
-webkit-transition:-webkit-transform 1s linear;
}
#op{
text-align: center;
margin: 40px auto;
}
</style>
<script type="text/javascript">

var curIndex = 1;//当前页

function next(){
if (curIndex==5)
return;
var curPage = document.getElementById("page"+curIndex);
curPage.style.webkitTransform="rotateX(90deg)";
curIndex++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.webkitTransform="rotateX(0deg)";//值表示旋转到什么位置，而不是旋转多少度
}
function prev(){
if (curIndex==1)
return;

curIndex--;
var prevPage = document.getElementById("page"+curIndex);
prevPage.style.webkitTransform="rotateX(0deg)";
}
</script>
</head>
<body>
<div id="experiment">
<div id="pagegroup">
<div class="page" id="page5">5</div>
<div class="page" id="page4">4</div>
<div class="page" id="page3">3</div>
<div class="page" id="page2">2</div>
<div class="page" id="page1">1</div>
</div>
</div>
<div id="op">
<a href="javascript:next()">next</a> 
<a href="javascript:prev()">previous</a>
</div>
</body>
</html>

完成上一个例子后，类似的可以完成一个可调节旋转角度的正方体。正方体的样式通过设置transform-origin和rotate的值实现。

<!DOCTYPE html>
<html>
<head>
<title>myCube</title>
<style type="text/css">

#myCube{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
}
#cube{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;

-webkit-transform-style:preserve-3d;
}
.face{
position: absolute;
width: 160px;
height: 160px;
padding: 20px;
background-color: black;

color: white;
font-weight: bold;
font-size: 160px;
line-height: 160px;
text-align: center;

-webkit-transition:-webkit-transform 1s linear;
}
#face1{
}
#face2{
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
}
#face3{
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
}
#face4{
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
}
#face5{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
}
#face6{
-webkit-transform:translateZ(-160px);
}
#op{
margin: 0 auto;
width: 800px;
font-weight: bold;
font-size: 16px;
}
#op .range-control{width: 720px;}
</style>
<script type="text/javascript">
function rotate(){
var x = document.getElementById("rotatex").value;
var y = document.getElementById("rotatey").value;
var z = document.getElementById("rotatez").value;

document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
document.getElementById("degx").innerText = x;
document.getElementById("degy").innerText = y;
document.getElementById("degz").innerText = z;
}
</script>
</head>
<body>
<div id="myCube">
<div id="cube">
<div class="face" id="face1">1</div>
<div class="face" id="face2">2</div>
<div class="face" id="face3">3</div>
<div class="face" id="face4">4</div>
<div class="face" id="face5">5</div>
<div class="face" id="face6">6</div>
</div>
</div>
<div id="op">
<p>rotateX:<span id="degx">0</span>deg</p>
<input type="range" id="rotatex" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
<p>rotateY:<span id="degy">0</span>deg</p>
<input type="range" id="rotatey" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
<p>rotateZ:<span id="degz">0</span>deg</p>
<input type="range" id="rotatez" min=-360 max=360 value="0" class="range-control" onchange="rotate()" /></br>
</div>
</body>
</html>

参考教程：http://www.imooc.com/learn/77

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

标签：

相关文章推荐

新的分享

章节导航

CSS3 3D效果 实现一个可旋转的正方体

CSS3 3D效果实现一个可旋转的正方体