怎么可以让正方体沿着中心旋转？
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体</title>
</head>
<body>
<div class='out-box'>
<div class="inner-box">
<span class="front common">前</span>
<span class="left common">左</span>
<span class="right common">右</span>
<span class="behind common">后</span>
<span class="top common">上</span>
<span class="bottom common">下</span>
</div>
</div>
<style>
body,html{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: antiquewhite;
}
.out-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
perspective: 5000px;
backface-visibility: hidden;
}
.inner-box {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: translatez(-150px) rotateX(30deg) rotateY(30deg) ;
}
.front {
background-color: salmon;
transform:translatez(150px);
}
.behind {
transform:translatez(-150px);
background-color: aqua;
}
.right {
background-color: chartreuse;
transform:rotateY(90deg) translatez(150px) ;
}
.left {
background-color: pink;
transform:rotateY(-90deg) translatez(150px) ;
}
.top {
background-color: darkcyan;
transform: rotateX(90deg) translateZ(150px);
}
.bottom {
background-color: coral;
transform: rotateX(90deg) translateZ(-150px);
}
.inner-box:hover {
transform: translatez(-150px) rotateX(135deg) rotateY(45deg) ;
transition: all 3s;
}
.common {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
text-align: center;
font-size: 35px;
font-weight: bold;
color: #fff;
width: 300px;
height: 300px;
line-height: 300px;
}
</style>
</body>
</html>
加一个关键帧动画
@-webkit-keyframes s{
0%{
-webkit-transform:rotateY(0);
}
100%{
-webkit-transform:rotateY(-359.9deg);
}
}
http://www.w3school.com.cn/cssref/pr_transform-origin.asp
查看这个文档就可以了，调整你的transform-origin 在 x y z 三个轴上的位置为 50%