Question

我已经使用CSS创建了一个3d立方体，现在我想在HTML页面上旋转该立方体。我的问题是当多维数据集旋转时，它也移动到侧面，我需要它保持在原位并旋转。

我曾尝试将div的偏斜度更改为相对偏斜度，这样可以分散立方体的侧面并仍然使其旋转到侧面。我认为该问题与转换原点有关，但是无论我如何更改其值都无济于事。

.spinner div {
  position: absolute;
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 2px solid rgb(0, 0, 0);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 100px;
}

.spinner .face1 {
  transform: translateZ(150px);
  background-color: blue;
}

.spinner .face2 {
  transform: rotateY(90deg) translateZ(150px);
  background-color: rgb(184, 187, 31);
}

.spinner .face3 {
  transform: rotateY(180deg) translateZ(150px);
  background-color: green;
}

.spinner .face4 {
  transform: rotateY(-90deg) translateZ(150px);
  background-color: red;
}

.spinner {
  animation: spincube 6s infinite;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: top;
  text-align: center;
  margin-top: 10%;
  margin-left: 40%;
}

@keyframes spincube {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg)
  }
}

<body>
  <div class="center-screen">
    <div class="spinner">
      <div class="face1">1</div>
      <div class="face2">2</div>
      <div class="face3">3</div>
      <div class="face4">4</div>

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

如前所述，我希望立方体会留在原处，但会滑到侧面。

Answer 1

我将像下面那样重新调整变换，以确保幻灯片位于主要元素的中心周围，该元素是一个空元素。

请注意使用translateX来达到所需的效果。

.spinner div {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgb(0, 0, 0);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 80px;
}

.spinner .face1 {
  transform: translateZ(50px) translateX(-50%);
  background-color: blue;
}

.spinner .face2 {
  transform: rotateY(90deg);
  background-color: rgb(184, 187, 31);
}

.spinner .face3 {
  transform: translateZ(-50px) translateX(-50%) rotateY(180deg) ;
  background-color: green;
}

.spinner .face4 {
  transform: translateX(-100%) rotateY(-90deg);
  background-color: red;
}

.spinner {
  animation: spincube 6s infinite;
  transform-style: preserve-3d;
  display: inline-block; /* This is important !!*/
  outline: 5px solid red; /* to illustrate */
}

.center-screen {
  text-align: center;
  margin-top: 10%;
}

@keyframes spincube {
  to {
    transform: rotateY(-360deg)
  }
}

<div class="center-screen">
  <div class="spinner">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
    <div class="face4">4</div>
  </div>
</div>

您还可以依靠left来解决此问题：

.spinner div {
  position: absolute;
  width: 100px;
  left:-50px;
  height: 100px;
  border: 2px solid rgb(0, 0, 0);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 80px;
}

.spinner .face1 {
  transform: translateZ(50px);
  background-color: blue;
}

.spinner .face2 {
  transform: rotateY(90deg);
  background-color: rgb(184, 187, 31);
  left:0;
}

.spinner .face3 {
  transform: translateZ(-50px) rotateY(180deg) ;
  background-color: green;
}

.spinner .face4 {
  transform:rotateY(-90deg);
  background-color: red;
  left:-100px;
}

.spinner {
  animation: spincube 6s infinite;
  transform-style: preserve-3d;
  display: inline-block; /* This is important !!*/
  outline: 5px solid red; /* to illustrate */
  position:relative;
}

.center-screen {
  text-align: center;
  margin-top: 10%;
}

@keyframes spincube {
  to {
    transform: rotateY(-360deg)
  }
}

<div class="center-screen">
  <div class="spinner">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
    <div class="face4">4</div>
  </div>
</div>

Answer 2

您可以执行以下操作：积分：https://codepen.io/bcgwebdesign/pen/gRXxxR?editors=0100

提示：Codepen上有很多此类演示

/* keyframes for rotating animation */
@-webkit-keyframes spinX {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}

@-webkit-keyframes spinBoth {
  from { transform: rotateY(0) rotateX(0); }
  to   { transform: rotateY(360deg) rotateX(0deg) ; }
}

@-webkit-keyframes spinY {
  from { transform: rotateX(0); }
  to   { transform: rotateX(360deg); }
}

@-webkit-keyframes recolor {
  0% { background: rgba(0,255,0,0.1); }
  33%   { background: rgba(255,0,0,0.1); }
  66%   { background: rgba(0,0,255,0.1); }
}

/* scene wrapper */

.wrapper{
  height: 300px;
  margin-top:0;
  position:relative;
  perspective: 1000px;
  perspective-origin: 50% -50px;
}

/* cube wrapper */
.cube {
  position: relative;
  margin: 200px auto;
  width: 200px;
  transform-style: preserve-3d;
  animation: spinBoth 5s infinite ease-in-out;
  transition: all 1s linear;
}

/* outer cube */
b {
  position:absolute;
  width:200px;
  height:200px;
  display:block;
  background:rgba(255,0,0,0.1);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
  font-size:20px;
  text-align:center;
  line-height:200px;
  color:rgba(0,0,0,0.5);
  font-family:sans-serif;
  text-transform:uppercase;
  transition: all 1s linear;
}
b.back{
  transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
b.right{
  transform:translateY(-100px) rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
b.left{
  transform:translateY(-100px)rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
b.top{
  transform:rotateX(-90deg) translateY(-100px) translateZ(-100px);
  transform-origin: top center;
}
b.bottom{
  transform:rotateX(90deg) translateY(100px) translateZ(100px);
  transform-origin: bottom center;
}
b.front{
  transform: translateZ(100px) translateY(-100px);
}

    <div class="wrapper">
      <div class="cube">
           <b class="front">front</b>
           <b class="back">back</b>
           <b class="top">top</b>
           <b class="bottom">bottom</b>
           <b class="left">left</b>
           <b class="right">right</b>
      </div>
    </div>

如何使3D立方体旋转到位

2 个答案: