利用css3实现3D立方体旋转
程序员文章站
2022-03-27 13:13:20
...
<!DOCTYPE html>
<html>
<head>
<title>cssBox</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#stage{ /*舞台元素,该元素作为舞台,不用进行3d操作,舞台内部的元素需设置为3d元素,包括容器和容器内的元素*/
position: relative;
height: 800px;
background-color: #D4D4D4;
perspective: 3500px; /*使得舞台子元素变为透视元素, 即遵循近大远小,参考WebGL的透视相机*/
perspective-origin: 0 0; /*设置相机相对舞台的位置, 这里设置未左上角,个人理解是相机发射垂直射线到stage形成的点在左上角*/
}
#container{
width: 500px;
height: 500px;
position: absolute;
/*使得容器居中放置*/
margin-left: calc(50% - 250px);
margin-top: 150px;
transition: all ease-in-out 1s;
/*这步操作很关键,给容器加入3d效果,这时候容器内部的元素(即容器子元素),形成3d关系,若无此操作,经过3d变换,空间是乱的*/
transform-style: preserve-3d;
/*设置容器进行3d变换的中心点,即WebGL里的物体中心点,所有变换的会围绕改点进行,尤其是旋转最为明显,这里设置的点的位置刚好在正方体的最中心*/
transform-origin: center center 250px;
}
.page{
box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/
/*该操作这里可要可不要,默认值就是visible,若设置为hidden,则一个元素转到背面的时候会变为透明,否则背面跟前面一样。这里是看不到背面的,所有不用进行设置*/
backface-visibility: visible;
position: absolute;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<div id="page1" class="page" style="background-color: #D15FEE; transform: translateZ(500px);"></div>
<div id="page2" class="page" style="background-color: #CDCD00; transform-origin: left center; transform: rotateY(-90deg);"></div>
<div id="page3" class="page" style="background-color: #C0FF3E; transform-origin: right center; transform: rotateY(90deg);"></div>
<div id="page4" class="page" style="background-color: #ADD8E6; transform-origin: center top; transform: rotateX(90deg);"></div>
<div id="page5" class="page" style="background-color: #8B4513; transform-origin: center bottom; transform: rotateX(-90deg);" ></div>
<div id="page6" class="page" style="background-color: #303030; transform: rotateY(180deg)"></div>
</div>
</div>
<script type="text/javascript">
var container = document.getElementById("container");
var angle = 0;
container.addEventListener("click", function(){
angle += 90;
container.style.transform = "rotateY(" + angle + "deg)";
}, false);
</script>
</body>
</html>
另一种实现方式:通过先旋转再逐个平移来实现正方体,这样不用变换中心店transform-origin:
<!DOCTYPE html>
<html>
<head>
<title>cssBox</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#stage{ /*舞台元素,该元素作为舞台,不用进行3d操作,舞台内部的元素需设置为3d元素,包括容器和容器内的元素*/
position: relative;
height: 800px;
background-color: #D4D4D4;
perspective: 3500px; /*使得舞台子元素变为透视元素, 即遵循近大远小,参考WebGL的透视相机*/
perspective-origin: 0 0; /*设置相机相对舞台的位置, 这里设置未左上角,个人理解是相机发射垂直射线到stage形成的点在左上角*/
}
#container{
width: 500px;
height: 500px;
position: absolute;
/*使得容器居中放置*/
margin-left: calc(50% - 250px);
margin-top: 150px;
transition: all ease-in-out 1s;
/*这步操作很关键,给容器加入3d效果,这时候容器内部的元素(即容器子元素),形成3d关系,若无此操作,经过3d变换,空间是乱的*/
transform-style: preserve-3d;
}
.page{
box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/
/*该操作这里可要可不要,默认值就是visible,若设置为hidden,则一个元素转到背面的时候会变为透明,否则背面跟前面一样。这里是看不到背面的,所有不用进行设置*/
backface-visibility: visible;
position: absolute;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<!--这里translateZ不像WebGL里的z坐标,WebGL的z坐标是永恒不变的,变的只有物体场景,这里translateZ所指的方向是相对物体当前状态而定,永远相对物体的正前方(正前方指面朝的方向,初始朝着人眼)-->
<div id="page1" class="page" style="background-color: #D15FEE; transform: rotateY(0deg) translateZ(250px);"></div>
<div id="page2" class="page" style="background-color: #CDCD00; transform: rotateY(90deg) translateZ(250px);"></div>
<div id="page3" class="page" style="background-color: #C0FF3E; transform: rotateY(180deg) translateZ(250px);"></div>
<div id="page4" class="page" style="background-color: #ADD8E6; transform: rotateY(270deg) translateZ(250px);"></div>
<div id="page5" class="page" style="background-color: #8B4513; transform: rotateX(-90deg) translateZ(250px)" ></div>
<div id="page6" class="page" style="background-color: #303030; transform: rotateX(90deg) translateZ(250px)"></div>
</div>
</div>
<script type="text/javascript">
var container = document.getElementById("container");
var angle = 0;
container.addEventListener("click", function(){
angle += 90;
container.style.transform = "rotateY(" + angle + "deg)";
}, false);
</script>
</body>
</html>
下一篇: MySQL数据库密码如何修改?