变换翻译旋转订单

Question

我正在制作3D立方体的项目。我花了几个小时在CSS中寻找错误。我无法找到任何。然后我开始摆弄代码。为了我的娱乐，如果我在转换之前使用translate翻译像 transform: translateX(value px) rotateY(value deg); 结果将是一个破碎的立方体。它只影响立方体的顶部，右侧和左侧。 虽然在立方体的底面和背面有相反的效果，即transform: rotateX(vlaue deg) translateY(value px);正在让我折叠回来和底部。这里是JSFiddle。

Answer 1

希望这有助于

考虑两个变换命令：

1. transform: translateX(value px) rotateY(value deg);

在这种情况下旋转Y首先完成，然后平移X，你会得到一个破碎的立方体，因为transform-origin property.If你删除它将是完美的。

将transform-origin属性应用于平移变换 函数在结果中没有明显的视觉差异。 这是因为被变换影响的元素被移动而没有 更改其形状，大小或旋转。

.wrap { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-perspective: 800px; 
 
      perspective: 800px; 
 
    -webkit-perspective-origin: 50% 100px; 
 
      perspective-origin: 50% 100px; 
 
    margin-top: 150px; 
 
} 
 

 
.cube { 
 
    position: relative; 
 
    width: 200px; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    -webkit-animation: spin 10s linear infinite; 
 
      animation: spin 10s linear infinite; 
 
} 
 

 
.cube div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    color: #66cc00; 
 
    background: pink; 
 
} 
 

 
.cube .back { 
 
    -webkit-transform: translateZ(-100px) rotateY(180deg); 
 
      transform: translateZ(-100px) rotateY(180deg); 
 
} 
 

 
.cube .front { 
 
    -webkit-transform: translateZ(100px); 
 
      transform: translateZ(100px); 
 
} 
 

 
.cube .right { 
 
    -webkit-transform: translateX(100px) rotateY(-270deg); 
 
      transform: translateX(100px) rotateY(-270deg); 
 
} 
 

 
.cube .left { 
 
    -webkit-transform: translateX(-100px) rotateY(270deg); 
 
      transform: translateX(-100px) rotateY(270deg); 
 
} 
 

 
.cube .top { 
 
    -webkit-transform: translateY(-100px) rotateX(-90deg); 
 
      transform: translateY(-100px) rotateX(-90deg); 
 
} 
 

 
.cube .bottom { 
 
    -webkit-transform: translateY(100px) rotateX(90deg); 
 
      transform: translateY(100px) rotateX(90deg); 
 
} 
 

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

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

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

2. transform: rotateX(value deg) translateY(value px);

在这种情况下平移Y做第一，然后rotateX，所以你需要变换原点property.It允许你改变的变换位置元素。

在这里变换原点被应用于rotateX作为其处理完毕second.Thus 变换原点改变指元件变换 而不是移动整个元件

点