<!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: 10s;
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>我需要首先将box2翻转180度（以width的中心为Y轴）（transform: rotateY(180deg);）为什么当我给box2设置transform-origin:left;这个时候它沿着左边框向内旋转90度；但是之前设置的transform: rotateY(180deg);就无效了？怎么样让box2先翻转180度后再沿着左边Y轴旋转90度？
参考GPT和自己的思路：
当你给box2设置transform-origin:left;时，它沿着左边框向内旋转90度，因为这是它的transform-origin，也就是它的旋转中心点。而当你设置transform: rotateY(180deg);时，它旋转了180度，但是没有指定旋转的中心点，所以默认是以元素中心旋转。所以你需要同时设置transform-origin和transform，来指定旋转的中心点和旋转的角度。
想让box2先翻转180度后再沿着左边Y轴旋转90度，你可以这样设置：
transform: rotateY(180deg) rotateY(90deg);
transform-origin: left;
这里先使用了rotateY(180deg)旋转180度，然后使用了rotateY(90deg)沿着左边Y轴旋转90度，同时指定transform-origin为left，实现了你想要的效果。