使同一元素上的两个（或更多）变换协同工作

Question

如何让这两个一起工作？看起来他们是 blocking/breaking 彼此/或仅调用损坏的 transform3d

HTML结构

<div id="container">
    <div class="one" style="transform:translate3d(0,0,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(0,200px,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(100px,100px,0)"></div>
    <div class="two"></div>
</div>
<div class="div one"></div>

CSS 造型

#container {
    -webkit-perspective:200px;
    -webkit-transform-style:preserve-3d;
    width:450px
}
.one {
    position:absolute;
    width:100px;
    height:100px;
    background-color:blue;
    -webkit-transition:1s ease all;
    border:1px solid black;
}
.two {
    -webkit-transform:translate3d(0, 100px, 0);
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    -webkit-transition:1s ease all;
    border:1px solid black
}
.one:hover {
    -webkit-transform:scale3d(0, 0, 0);
}
.div.one {
    width:100px;
    height:100px;
    background-color:green;
   -webkit-transform:translate3d(0,400px,0);
}
.div.one:hover{
    -webkit-transform:scale3d(0,0,0);
}

Fiddle = http://jsfiddle.net/q44ssh7g/1/

Answer 1

使用多个转换时，您应该将其合并为一个，如下所示：

transform: translate3d(0,400px,0) scale3d(0,0,0);

否则会overwrite/block，如你所说。

使同一元素上的两个（或更多）变换协同工作

Make two (or more) transforms on same element work together

css

css-transforms