<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 700px;
}
.BOX{
width: 150px;
height: 150px;
border: 1px solid black;
margin: 50px auto;
position: relative;
transition: 3s;
transform-style: preserve-3d;
transform-origin: center center -75px;
}
.box1 {
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
margin: auto;
position: absolute;
}
.box1 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
grid-area: 2/2/3/3;
align-self: center;
justify-self: center;
}
.box2{
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
transform-origin:left;
transform: rotateY(90deg);
}
.box2 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
}
.box2 div:nth-child(1){
grid-area: 1/1/2/2;
align-self: center;
justify-self: center;
}
.box2 div:nth-child(2){
grid-area: 3/3/4/4;
align-self: center;
justify-self: center;
}
.box3{
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
transform-origin: right;
transform: rotateY(-90deg);
}
.box3 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
}
.box3 div:nth-child(1){
grid-area: 1/1/2/2;
align-self: center;
justify-self: center;
}
.box3 div:nth-child(2){
grid-area: 3/3/4/4;
align-self: center;
justify-self: center;
}
.box3 div:nth-child(3){
grid-area: 2/2/3/3;
align-self: center;
justify-self: center;
}
.box4{
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
transform-origin: bottom;
transform: rotateX(90deg);
}
.box4 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
}
.box4 div:nth-child(2){
grid-area: a3;
}
.box4 div:nth-child(3){
grid-area: a7;
}
.box4 div:nth-child(4){
grid-area: a9;
}
.box5{
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
position: absolute;
transform-origin: top;
transform: rotateX(-90deg);
}
.box5 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
}
.box5 div:nth-child(2){
grid-area: a3;
}
.box5 div:nth-child(3){
grid-area: a7;
}
.box5 div:nth-child(4){
grid-area: a9;
}
.box5 div:nth-child(5){
grid-area: a5;
}
.box6{
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3,1fr);
border-radius: 5px;
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
transform: translateZ(-150px) rotateY(180deg);
}
.box6 div{
width: 70%;
height: 70%;
background: black;
border-radius: 50%;
}
.box6 div:nth-child(2){
grid-area: a4;
}
.box6 div:nth-child(3){
grid-area: a7;
}
.box6 div:nth-child(4){
grid-area: a3;
}
.box6 div:nth-child(5){
grid-area: a6;
}
.box6 div:nth-child(6){
grid-area: a9;
}
.box1.box2.box3.box4.box5.box6{
backface-visibility: hidden;
}
.BOX:hover {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="BOX">
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>我把box6翻转了180度，并且给box1~6均设置了背面隐藏，为什么不起作用？背面都能看得到？
.box1,.box2,.box3,.box4,.box5,.box6 各个标签之间要用逗号隔开
1.
[class^='box']{
backface-visibility: hidden;
}//以box开头的所有class类
2.我发现box的位置不是很对，我用translate和rotate;如（transform: translateZ(-150px) rotateY(180deg);）
3.#BOX中border要删掉，要不然在6朝向自己的时候可以看到#BOX框