拉伸效果與規模Z

是否有可能使用scaleZ()有效地創建一個3D盒子？拉伸效果與規模Z

下面是我嘗試過，但顯然它沒有scaleZ都：

.box { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform: scaleZ(10); 
    -moz-transform: scaleZ(10); 
    -ms-transform: scaleZ(10); 
    -o-transform: scaleZ(10); 
    transform: scaleZ(10); 
    width: 100px; 
    height: 100px; 
    display: block; 
    background:red; 
}

有另一種方式，我可以解決這個？即使我必須使用Javascript？

DEMO：http://jsfiddle.net/3r1gus9f/

來源

2015-05-13 Shannon Hochkins

ScaleZ（）不「擠出」，那就必需元素的厚度，他們不知道。

ScaleZ特別在於在大多數情況下，它不會有任何明顯的效果（如在你的榜樣）的方式，並要求其他3D變換可見，例如：

.w{ 
 
    display:inline-block; 
 
    perspective:500px; 
 
    border:1px solid red; 
 
} 
 
.b{ 
 
    width:150px; 
 
    height:150px; 
 
    transform-origin:0 0; 
 
    transform: rotatey(45deg); 
 
    background:pink; 
 
} 
 
.b2{ 
 
    transform: scaleZ(10) rotatey(45deg); 
 
}

<div class="w"> 
 
    no scaleZ() 
 
    <div class="b"></div> 
 
</div> 
 
<div class="w"> 
 
    scaleZ(10) 
 
    <div class="b b2"></div> 
 
</div>

有關此背後計算的說明，請參閱What does the scaleZ() CSS transform function do?。

一種常見的方式，使與CSS一個3D立方體是使用6面，並把它們轉化爲立方體的6個面，你可以這樣做：

#cube { 
 
    position: relative; 
 
    width: 200px; height:200px; 
 
    margin: 100px auto; 
 
    perspective: 500px; 
 
    perspective-origin: 50% 10%; 
 
} 
 
#cube div { 
 
    font-size: 2rem; 
 
    position: absolute; 
 
    width: 200px; height: 200px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    border: 1px solid #000; 
 
} 
 
.back { 
 
    transform: translateZ(-100px) rotateY(180deg); 
 
} 
 
.right { 
 
    transform: rotateY(-270deg) translateX(100px); 
 
    transform-origin: top right; 
 
} 
 
.left { 
 
    transform: rotateY(270deg) translateX(-100px); 
 
    transform-origin: center left; 
 
} 
 
.top { 
 
    transform: rotateX(-90deg) translateY(-100px); 
 
    transform-origin: top center; 
 
} 
 
.bottom { 
 
    transform: rotateX(90deg) translateY(100px); 
 
    transform-origin: bottom center; 
 
} 
 
.front { 
 
    transform: translateZ(100px); 
 
}

<div id="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>

來源

2015-05-13 05:58:43