Question

我正在编码一个多维数据集，但无法使其正确旋转，有人可以帮助我吗？我已经尝试了一切。链接到我的代码如下：

@keyframes spin {
	 from {
		 transform: rotateY(0deg);
	}
	 to {
		 transform: rotateY(360deg);
	}
}
 body .cube {
	 overflow: visible;
	 perspective: 800px;
	 perspective-origin: 100px 100px;
	 margin-top: 50px;
	 margin-left: 200px;
	 position: relative;
	 animation: spin 10s linear infinite;
	 transform-origin: 150px 150px;
	 transform-style: preserve-3d;
	 transform-box: fill-box;
}
 body .cube h1 {
	 text-align: center;
	 transform: translateY(350%);
}
 body .cube .frontside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: green;
	 transform: translateZ(150px);
}
 body .cube .backside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: black;
	 transform: translateZ(-150px);
}
 body .cube .leftside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background: purple;
	 transform: translateX(-150px) rotateY(90deg);
}
 body .cube .rightside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: midnightblue;
	 transform: translateX(150px) rotateY(90deg);
}
 body .cube .topside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: yellow;
	 transform: translateY(-150px) rotateX(90deg);
}
 body .cube .bottomside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background: red;
	 transform: translateY(150px) rotateX(90deg);
}

<div class="cube">
    <div class="frontside"><h1>Hello1</h1></div>
    <div class="backside"><h1>Hello2</h1></div>
    <div class="leftside"><h1>Hello3</h1></div>
    <div class="rightside"><h1>Hello4</h1></div>
    <div class="topside"><h1>Hello5</h1></div>
    <div class="bottomside"><h1>Hello6</h1></div>
</div>

Answer 1

如果这不是您想要的，请修改问题

@keyframes spin {
	 from {
		 transform: rotateY(0deg);
	}
	 to {
		 transform: rotateY(360deg);
	}
}
 body .cube {
    overflow: visible;
    perspective-origin: 100px 100px;
    margin-top: 50px;
    margin-left: 200px;
    position: relative;
    transform-origin: 150px 150px;
    transform-style: preserve-3d;
    transform-box: fill-box;
    height: 200px;
    width: 200px;
    -webkit-animation: spin 15s infinite linear;
}




 body .cube h1 {
	 text-align: center;
	 transform: translateY(350%);
}
 body .cube .frontside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: green;
	 transform: translateZ(150px);
}
 body .cube .backside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: black;
	 transform: translateZ(-150px);
}
 body .cube .leftside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background: purple;
	 transform: translateX(-150px) rotateY(90deg);
}
 body .cube .rightside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: midnightblue;
	 transform: translateX(150px) rotateY(90deg);
}
 body .cube .topside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background-color: yellow;
	 transform: translateY(-150px) rotateX(90deg);
}
 body .cube .bottomside {
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 margin: 0;
	 opacity: 0.5;
	 background: red;
	 transform: translateY(150px) rotateX(90deg);
}

<!DOCTYPE html>
<html>

  <head>
	<link rel="stylesheet" href="1.css">
    <script type="text/javascript"></script>
  </head>



<body>
<div class="cube">
    <div class="frontside"><h1>Hello1</h1></div>
    <div class="backside"><h1>Hello2</h1></div>
    <div class="leftside"><h1>Hello3</h1></div>
    <div class="rightside"><h1>Hello4</h1></div>
    <div class="topside"><h1>Hello5</h1></div>
    <div class="bottomside"><h1>Hello6</h1></div>
</div>
</body>
</html>

无法旋转3D立方体

1 个答案: