作者:fo切為祢 | 来源:互联网 | 2023-05-19 20:11
我怎样才能让这两个一起工作?看起来他们正在阻止/打破彼此/或仅调用破坏transform3d
HTML结构
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);
}
小提琴= http://jsfiddle.net/q44ssh7g/1/
1> AwesomeGuy..:
使用多个转换时,您应该将它组合成一个,如下所示:
transform: translate3d(0,400px,0) scale3d(0,0,0);
否则它会覆盖/阻塞,如你所说.