想要做出一个会旋转的立方体，首先第一步，将立方体的6个面画出来。
html部分：
css部分及效果图：
之后将上下左右四个面收起来，用transform:rotate（90deg）或transform:rotate（-90deg）,让左边的沿着左边那个面的右边旋转90度。主要添加了如下代码：
在之后设置当鼠标进入到wrap时，让box转动，主要添加了如下代码：
这样，立方体的旋转效果就完成了。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#wrap{
width: 400px;
height: 400px;
border: 1px solid;
-webkit-perspective: 200px;
transform-style: preserve-3d;
}
.box{
width: 100px;
height: 100px;
position: relative;
left: 150px;
top: 150px;
transform-style: preserve-3d;
transform-origin: center center -50px;
transition: 3s;
}
#wrap:hover .box{
transform: rotateX(360deg);
}
.box div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
font: 50px/100px "微软雅黑";
text-align: center;
}
.box div:nth-child(1){
z-index: 1;
}
.box div:nth-child(2){
transform: translateZ(-100px);
}
.box div:nth-child(3){
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
.box div:nth-child(4){
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
.box div:nth-child(5){
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box div:nth-child(6){
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
</style>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
如果想将效果改成下图的形式：做出一个透明旋转形式该如何改呢？
首先在原代码的基础上，做如下改动：
所有代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#wrap{
width: 400px;
height: 400px;
border: 1px solid;
-webkit-perspective: 200px;
/* transform-style: preserve-3d; */
background-color: pink;
}
.box{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 150px;
top: 150px;
transform-style: preserve-3d;
transform-origin: center center -50px;
transition: 3s;
}
#wrap:hover .box{
transform: rotateX(360deg);
}
.box div{
width: 100px;
height: 100px;
background-color: rgba(123,321,333,.3);
position: absolute;
font: 50px/100px "微软雅黑";
text-align: center;
backface-visibility: hidden;
}
.box div:nth-child(1){
z-index: 1;
}
.box div:nth-child(2){
transform: translateZ(-100px);
}
.box div:nth-child(3){
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
.box div:nth-child(4){
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
.box div:nth-child(5){
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box div:nth-child(6){
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
</style>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
如果觉得第一种做立方体的办法太麻烦，每个面都要旋转太麻烦，可以让每个面都沿着中心基点旋转：
网友评论