css - 如何通过转换子元素来重新创建透视原点效果？

标签 css internet-explorer-10 css-transforms

所以在与 IE 斗争之后 glitches和 incompatibilities ，我终于让我的正确大小的长方体工作了(更新: here's an example of it)。动画需要分别为所有边而不是单个父元素设置动画，但这似乎是让它在 IE 中工作的唯一方法。

使用单个长方体效果很好，但是多个长方体是有问题的，因为透视应用于单个变换的元素(这是在 IE 中工作所必需的)它们看起来都一样，无论它们在舞台上的位置如何:

http://jsfiddle.net/YsPmm/

如果将透视应用于舞台，消失点将位于其中心，导致子对象相应地变换，这就是我要重新创建的内容(同时保持 IE 兼容性!):

http://jsfiddle.net/kbhej/

不幸的是，将透视原点应用于单个元素似乎不起作用，所以我想知道是否有人有任何其他想法如何实现这种效果？

jsfiddle 示例代码

对单个元素的透视:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .top {
            background-color: #00ff00;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
        }

        .front {
            background-color: #ff0000;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>

舞台视角:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;

            -webkit-perspective: 800px;
               -moz-perspective: 800px;
                    perspective: 800px;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;

            -webkit-transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .wrapper {    
            -webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
               -moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
                    transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
        }

        .top {
            background-color: #00ff00;
            -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
               -moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
                    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
        }

        .front {
            background-color: #ff0000;
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>

最佳答案

I.E. demo

我保留了您的原始 HTML，并将 CSS 更改为这个:

.stage {
    width: 800px;
    height: 800px;
    background: #f6f6f6;

    -webkit-perspective: 800px;
    -moz-perspective: 800px;
        
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 0px;
z-index: 3; 
}
.wrapper:nth-child(3) {
left: 0px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 0px;
z-index: 1;
}

.wrapper {    
-webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
   -moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}

.top {
background-color: #00ff00;
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
   -moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}

.front {
background-color: #ff0000;
}

/* IE specific */
.wrapper {
perspective: 800px;
perspective-origin: 400px;
}
.wrapper:nth-child(1) .top {
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg)      translate3d(0, -100px, 100px);
}
.wrapper:nth-child(1) .front {
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(2) .top {
transform: translate3d(200px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(2) .front {
transform: translate3d(200px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(3) .top {
transform: translate3d(400px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(3) .front {
transform: translate3d(400px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(4) .top {
transform: translate3d(600px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(4) .front {
transform: translate3d(600px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}

诀窍是不使用左属性，并通过转换来完成所有事情。 此外，您需要专门设置 perspective-origin，因为它在包装级别而不是基础级别工作。

编辑

我花了一些时间尝试以更方便的方式进行这项工作，但我没有成功。无论如何，我把我所做的留在这里，也许它在某种程度上有用。

我想让 html 和 CSS 为 webkit 工作，在 3 个级别设置转换。 然后，想法是设置从 CSS 计算的 IE 的 transform 属性。

jQuery 代码是:

function set() {
    $(".top").each(function(index, value) { 
        var wrap = $(this).parent();
        var stage = $(wrap).parent();
        var tr = $(stage).css('WebkitTransform')
          + ' ' + $(wrap).css('WebkitTransform')
          + ' ' + $(this).css('WebkitTransform');
         $(this).css("transform", tr);
    });
}

我就是想不通为什么这行不通。

关于css - 如何通过转换子元素来重新创建透视原点效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17203550/

上一篇：css - 如何使用相对/绝对定位来定位 Canvas

下一篇：css - 奇怪的 float 清除问题

相关文章：

html - Safari 翻译(%,%) 别名

javascript - 旋转图像不能很好地放置在父容器中

javascript - 计算旋转后box-shadow的位置

html - 调整大小时 DIV 2 在 DIV 1 之上

Javascript 聊天文本到底部

html - 文本前面的光标看起来比文本大

css - IE 10 flex，左边距 : auto pushing item out of flex container

javascript - IE10 支持 FormData() 吗？

jquery - YouTube 在 IE10 的每个选项卡上嵌入了叠加层

html - 如何使用 css 在一个点中显示两个段落？

©2024 IT工具网  联系我们