如何实现3D立方体俯视视角？HTML+CSS旋转立方体视角调整

我通过克隆编码实现了可点击按钮旋转的3D立方体（学习阶段，仅使用HTML和CSS，未用到JS）。现在想实现从上方略微俯视的视角，但当前只能从正面中心视角查看。

当前效果 vs 期望效果 #

• 当前立方体视角：
• 期望的俯视视角：

实现代码 #

CSS 代码 #

* {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  color: #444;
  overflow-y: scroll;
}
.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 1rem auto;
  text-align: center;  
}

.perspective {
  perspective: 2000px;
  position: relative;
  perspective-origin: 25rem-150px;
}
.cube {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 3.5rem auto;
  transition: 0.5s;
  transform-style: preserve-3d;
  /* animation: rotate 10s infinite linear; */
}
.cube div {
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: 0.95;
}

.cube div img {
  width: 100%;
  height: 100%;
}
@keyframes rotate {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}
.front {
  transform: translateZ(200px);
}
.back {
  transform: translateZ(-200px) rotateY(180deg);
}
.left {
  transform: rotateY(-90deg) translateZ(200px);
}
.right {
  transform: rotateY(90deg) translateZ(200px);
}
.top {
  transform: rotateX(90deg) translateZ(200px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(200px);
}


input {
  display: none;
}

#rotate:checked ~ .cube{
  animation: rotate 10s infinite linear;
}

#back:checked ~ .cube{
  animation: none;
  transform: rotateY(180deg);
}

#front:checked ~ .cube{
  animation:none;
  transform:none;
}

#right:checked ~ .cube{
  animation:none;
  transform:rotateY(-90deg);
}

#left:checked ~ .cube{
  animation:none;
  transform:rotateY(90deg);
}

#top:checked ~ .cube{
  animation:none;
  transform:rotateX(-90deg);
}

#bottom:checked ~ .cube{
  animation:none;
  transform:rotateX(90deg);
}

label{
  display: inline-block;
  padding: 0.25em 0.5em ;
  border-radius: 0.5rem;
  background: darkgreen; color: #fff; margin: 0. 0.25rem; 
  transition: 0.25s;
  
}

input:checked + label{
  background: goldenrod;
}

HTML 代码 #

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Rotatable 3D Cube</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel="stylesheet" href="css/style.css">

</head>

<body>


  <div class="wrapper">

  <div class="perspective">

    <input type="radio" id="rotate" name="switch"/>
    <label for="rotate">auto</label>

    <input type="radio" id="front" name="switch"/>
    <label for="front">front</label>

    <input type="radio" id="left" name="switch"/>
    <label for="left">left</label>

    <input type="radio" id="back" name="switch"/>
    <label for="back">back</label>

    <input type="radio" id="right" name="switch"/>
    <label for="right">right</label>

    <input type="radio" id="top" name="switch"/>
    <label for="top">top</label>

    <input type="radio" id="bottom" name="switch"/>
    <label for="bottom">bottom</label>


    <div class="cube">
      <div class="front">
        <img src="https://smilecmk.github.io/hosted-assets/images/front.jpg">
      </div>
      <div class="back">
        <img src="https://smilecmk.github.io/hosted-assets/images/back.jpg">
      </div>
      <div class="top">
        <img src="https://smilecmk.github.io/hosted-assets/images/top.jpg">
      </div>
      <div class="bottom">
        <img src="https://smilecmk.github.io/hosted-assets/images/bottom.jpg">
      </div>
      <div class="left">
        <img src="https://smilecmk.github.io/hosted-assets/images/left.jpg">
      </div>
      <div class="right">
        <img src="https://smilecmk.github.io/hosted-assets/images/right.jpg">
      </div>
    </div>
  </div>

</div>
  
  
</body>
</html>

解决方法 #

要实现俯视视角，只需调整立方体的初始变换并同步所有按钮控制的状态：

1. 修正透视原点语法错误
   原代码中perspective-origin属性值缺少空格，修正后：

.perspective {
  perspective: 2000px;
  position: relative;
  perspective-origin: 25rem -150px;
}

2. 设置初始俯视角度
   给.cube添加X轴旋转，实现初始俯视效果：

.cube {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 3.5rem auto;
  transition: 0.5s;
  transform-style: preserve-3d;
  transform: rotateX(-20deg); /* 角度可按需调整 */
}

3. 同步所有按钮控制的变换状态
   修改各单选框对应的立方体样式，在原有变换基础上叠加X轴旋转：

/* 修改自动旋转动画，保留俯视角度 */
@keyframes rotate {
  0% {transform: rotateX(-20deg) rotateY(0deg);}
  100% {transform: rotateX(-20deg) rotateY(360deg);}
}

#rotate:checked ~ .cube{
  animation: rotate 10s infinite linear;
}

#back:checked ~ .cube{
  animation: none;
  transform: rotateX(-20deg) rotateY(180deg);
}

#front:checked ~ .cube{
  animation:none;
  transform: rotateX(-20deg);
}

#right:checked ~ .cube{
  animation:none;
  transform: rotateX(-20deg) rotateY(-90deg);
}

#left:checked ~ .cube{
  animation:none;
  transform: rotateX(-20deg) rotateY(90deg);
}

#top:checked ~ .cube{
  animation:none;
  transform: rotateX(-110deg); /* 原-90deg叠加-20deg */
}

#bottom:checked ~ .cube{
  animation:none;
  transform: rotateX(70deg); /* 原90deg叠加-20deg */
}

这样就能实现初始的俯视视角，且所有按钮控制的旋转状态都会保持这个俯视角度。

内容的提问来源于stack exchange，提问作者Asha