CSS 变换 3d 立方体偏移 [英] CSS transform 3d cube offsets
问题描述
我正在尝试使用 CSS 3D 转换来显示包含横截面的立方体和长方体.我的目标是 Chrome、Firefox 和 MSIE 11.我发现为了保持 MSIE 11 兼容性,我需要避免使用转换类型:preserve-3d,因为微软不支持,所以我需要应用所有父子变换到每个立方体面.
对于立方体,我可以旋转每一边以正确对齐它们,但是对于长方体,末端是偏移的 - 为什么会这样,我该如何解决?
此屏幕截图说明了问题:
这是 HTML:
<h1>1.</h1><div class="cube"><div class="side front">1</div><div class="side back">6</div><div class="右侧边">4</div><div class="side left">3</div><div class="side top">5</div><div class="侧底">2</div>
<div class="test test2"><h1>2.</h1><div class="cube cuboid"><div class="side front">1</div><div class="side back">6</div><div class="右侧边">4</div><div class="side left">3</div><div class="side top">5</div><div class="侧底">2</div>
这里是 CSS:
div.test {高度:200px;}/* 基本立方体 */.cube {字体大小:4em;宽度:500px;保证金:自动;/* MSIE11 不支持preserve-3d.对于 MSIE,所有变换都必须应用于所有元素 */}.边 {位置:绝对;宽度:100px;高度:100px;背景:RGBA(255,0,0,0.3);边框:1px纯黑色;白颜色;文本对齐:居中;行高:100px;}/* 对于 MSIE11 兼容性,避免在父级上使用变换,组合所有父+子变换,不支持变换样式:preserve3d */.正面 {变换:rotateX(-40deg)rotateY(32deg)translateZ(50px);z-索引:1000;}.最佳 {变换:rotateX(-40deg)rotateY(32deg)rotateX(90deg)translateZ(50px);z-索引:1000;}.对 {变换:rotateX(-40deg)rotateY(32deg)rotateY(90deg)translateZ(50px);}.剩下 {变换:rotateX(-40deg)rotateY(32deg)rotateY(-90deg)translateZ(50px);z-索引:1000;}.底部 {变换:rotateX(-40deg)rotateY(32deg)rotateX(-90deg)translateZ(50px);}.背部 {变换:rotateX(-40deg)rotateY(-148deg)translateZ(50px);}/* 长方体 - 100 x 100 x 200 */.cuboid .front {宽度:200px;}.cuboid .top {宽度:200px;}.cuboid .right {变换:rotateX(-40deg)rotateY(122deg)translateZ(150px);}.cuboid .back {宽度:200px;}.cuboid .bottom {宽度:200px;}
这是此代码的 JSFiddle:https://jsfiddle.net/6h7mmtgn/>
感谢您的任何建议.
.cuboid .left,.cuboid .right {边距顶部:16px;左边距:7px;}
演示如下:
div.test {宽度:100%;透视:750px;高度:200px;}/* 基本立方体 */.cube {字体大小:4em;宽度:500px;保证金:自动;/* MSIE11 不支持preserve-3d.对于 MSIE,所有变换都必须应用于所有元素 */}.边 {位置:绝对;宽度:100px;高度:100px;背景:rgba(255, 0, 0, 0.3);边框:1px纯黑色;白颜色;文本对齐:居中;行高:100px;}/* 对于 MSIE11 兼容性,避免在父级上使用变换,组合所有父+子变换,不支持变换样式:preserve3d */.正面 {变换:rotateX(-40deg)rotateY(32deg)translateZ(50px);z-索引:1000;}.最佳 {变换:rotateX(-40deg)rotateY(32deg)rotateX(90deg)translateZ(50px);z-索引:1000;}.对 {变换:rotateX(-40deg)rotateY(32deg)rotateY(90deg)translateZ(50px);}.剩下 {变换:rotateX(-40deg)rotateY(32deg)rotateY(-90deg)translateZ(50px);z-索引:1000;}.底部 {变换:rotateX(-40deg)rotateY(32deg)rotateX(-90deg)translateZ(50px);}.背部 {变换:rotateX(-40deg)rotateY(-148deg)translateZ(50px);}/* 长方体 - 100 x 100 x 200 */.cuboid .front {宽度:200px;}.cuboid .top {宽度:200px;}.cuboid .right {变换:rotateX(-40deg)rotateY(122deg)translateZ(150px);}.cuboid .back {宽度:200px;}.cuboid .bottom {宽度:200px;}.cuboid .left, .cuboid .right {边距顶部:16px;左边距:7px;}
<h1>1.</h1><div class="cube"><div class="side front">1</div><div class="side back">6</div><div class="右侧边">4</div><div class="side left">3</div><div class="side top">5</div><div class="侧底">2</div>
<div class="test test2"><h1>2.</h1><div class="cube cuboid"><div class="side front">1</div><div class="side back">6</div><div class="右侧边">4</div><div class="side left">3</div><div class="side top">5</div><div class="侧底">2</div>