CSS 变换 3d 立方体偏移 [英] CSS transform 3d cube offsets

查看：36
本文介绍了CSS 变换 3d 立方体偏移的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 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>

在 JSFiddle 上查看

I am trying to use CSS 3D transforms to display cubes and cuboids which will contain cross-sections. I am targeting Chrome, Firefox and MSIE 11. I have found that to maintain MSIE 11 compatibility, I need to avoid using transform-type: preserve-3d, as this is not supported by Microsoft, so I need to apply all parent and child transforms to each cube face.

For a cube, I can rotate each side to align them correctly, but for a cuboid, the ends are offset - why is this, and how can I fix it?

This screenshot illustrates the problem:

Here is the HTML:

<div class="test test1">
    <h1>1.</h1>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</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="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>

and here is the CSS:

    div.test {
        height: 200px;
    }

    /* basic cube */
    .cube {
        font-size: 4em;
        width: 500px;
        margin: auto;
        /* MSIE11 does not support preserve-3d.
          for MSIE all transforms must be applied to all elements */
    }

    .side {
        position: absolute;
        width: 100px;
        height: 100px;
        background: rgba(255,0,0,0.3);
        border: 1px solid black;
        color: white;
        text-align: center;
        line-height: 100px;
    }
    /* for MSIE11 compatibility, avoid using a transform on the parent, combine all parent+child transforms, transform-style: preserve3d is not supported */
    .front {
        transform: rotateX(-40deg) rotateY(32deg) translateZ(50px);
        z-index: 1000;
    }
    .top {
        transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px);
        z-index: 1000;
    }
    .right {
        transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px);
    }
    .left {
        transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px);
        z-index: 1000;
    }
    .bottom {
        transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px);
    }
    .back {
        transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px);
    }

    /* cuboid - 100 x 100 x 200 */
    .cuboid .front {
        width: 200px;
    }
    .cuboid .top {
        width: 200px;
    }
    .cuboid .right {
        transform: rotateX(-40deg) rotateY(122deg) translateZ(150px);
    }
    .cuboid .back {
        width: 200px;
    }
    .cuboid .bottom {
        width: 200px;
    }

Here is a JSFiddle of this code: https://jsfiddle.net/6h7mmtgn/

Thanks for any suggestions.

解决方案 

.cuboid .left,
.cuboid .right {
     margin-top: 16px;
     margin-left: 7px;
}

Demonstration below:

div.test {
    xwidth: 100%;
    xperspective: 750px;
    height: 200px;
}
/* basic cube */
 .cube {
    font-size: 4em;
    width: 500px;
    margin: auto;
    /* MSIE11 does not support preserve-3d.
			  for MSIE all transforms must be applied to all elements */
}
.side {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 0, 0.3);
    border: 1px solid black;
    color: white;
    text-align: center;
    line-height: 100px;
}
/* for MSIE11 compatibility, avoid using a transform on the parent, combine all parent+child transforms, transform-style: preserve3d is not supported */
 .front {
    transform: rotateX(-40deg) rotateY(32deg) translateZ(50px);
    z-index: 1000;
}
.top {
    transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px);
    z-index: 1000;
}
.right {
    transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px);
}
.left {
    transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px);
    z-index: 1000;
}
.bottom {
    transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px);
}
.back {
    transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px);
}
/* cuboid - 100 x 100 x 200 */
 .cuboid .front {
    width: 200px;
}
.cuboid .top {
    width: 200px;
}
.cuboid .right {
    transform: rotateX(-40deg) rotateY(122deg) translateZ(150px);
}
.cuboid .back {
    width: 200px;
}
.cuboid .bottom {
    width: 200px;
}
.cuboid .left, .cuboid .right {
    margin-top: 16px;
    margin-left: 7px;
}

<div class="test test1">
    <h1>1.</h1>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</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="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>

View on JSFiddle

这篇关于CSS 变换 3d 立方体偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆