响应3D立方体 - 底部Y轴移动与视口调整

我试图做一个响应长方体与深度，将与窗口调整。但是，不管我做什么，我都无法正确地工作。当视口具有方形宽高比时，它只在Z轴上排列。
我曾与顶侧移动，当我不得不将其设置为平移Y（-50vh）同样的问题，但它开始表现如何我想，当我把它改为-50vw（由于某种原因，我无法弄清楚）。响应3D立方体 - 底部Y轴移动与视口调整

我怎样才能使底部响应，如顶部？

https://codepen.io/anon/pen/jwBQGR

.scene { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0 auto 0; 
 
    perspective: 3000px; 
 
} 
 

 
.rectangle { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
    transform: translateZ(-50vw); 
 
} 
 

 
.side { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: visible; 
 
} 
 

 
.back { 
 
    transform: translateZ(-50vw); 
 
    background-color: saddlebrown; 
 
} 
 

 
.top { 
 
    background-color: lightblue; 
 
    height: 100vw; 
 
    transform: translateY(-50vw) rotateX(-90deg); 
 
} 
 

 
.bottom { 
 
    background-color: green; 
 
    height: 100vw; 
 
    transform: translateY(50vh) rotateX(90deg); 
 
} 
 

 
.front { 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 

 
.left { 
 
    background-color: sandybrown; 
 
    transform: translateX(-50vw) rotateY(-90deg); 
 
} 
 

 
.right { 
 
    background-color: brown; 
 
    transform: translateX(50vw) rotateY(90deg); 
 
}

<div class="scene"> 
 
    <div class="rectangle" id="cubeID"> 
 
    <div class="side back"> 
 
     <h1>Back</h1> 
 
    </div> 
 
    <div class="side top"> 
 
     <h1>Top </h1> 
 
    </div> 
 
    <div class="side bottom"> 
 
     <h1>Bottom</h1> 
 
    </div> 
 
    <div class="side front"> 
 
     <h1>Front</h1> 
 
    </div> 
 
    <div class="side left"> 
 
     <h1>Left</h1> 
 
    </div> 
 
    <div class="side right"> 
 
     <h1>Right</h1> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-20 wgarlick

.scene { 宽度：100vw; 身高：100vh; 余量：0汽车0; perspective：3000px; 背景：绿色; } 试试这个，一个快速的黑客攻击。 –

的点是使用transform-origin属性（见transform-origin on MDN）。通过这种方式，可以控制每个侧旋转轴，而不是翻译重新定位后，他们像你一样，他们一直在旋转。

下面是一个例子：

body,html{margin:0;} 
 
.scene { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
    perspective: 3000px; 
 
} 
 

 
.rectangle { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.side { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: visible; 
 
} 
 

 
.back { 
 
    transform: translateZ(-100vw); 
 
    background-color: saddlebrown; 
 
} 
 
.top { 
 
    background-color: lightblue; 
 
    height:100vw; 
 
    transform-origin:50% 0; 
 
    transform: rotateX(-90deg); 
 
} 
 
.bottom { 
 
    background-color: green; 
 
    height:100vw; 
 
    bottom:0; 
 
    transform-origin: 50% 100%; 
 
    transform: rotateX(90deg); 
 
} 
 
.front { 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
.left { 
 
    background-color: sandybrown; 
 
    transform-origin:0 50%; 
 
    transform: rotateY(90deg); 
 
} 
 
.right { 
 
    background-color: brown; 
 
    transform-origin:100% 50%; 
 
    transform: rotateY(-90deg); 
 
}

<div class="scene"> 
 
    <div class="rectangle" id="cubeID"> 
 
    <div class="side back"><h1>Back</h1></div> 
 
    <div class="side top"><h1>Top </h1></div> 
 
    <div class="side bottom"><h1>Bottom</h1></div> 
 
    <div class="side front"><h1>Front</h1></div> 
 
    <div class="side left"><h1>Left</h1></div> 
 
    <div class="side right"><h1>Right</h1></div> 
 
    </div> 
 
</div>

来源

2017-06-20 06:35:55

响应3D立方体 - 底部Y轴移动与视口调整

回答

相关问题