问题是：transition的过渡效果显示不出来了，只能显示出开头和结尾的部分，中间的省略了：代码1如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
perspective:800px;
perspective-origin:50% 50%;
-webkit-transform-style: preserve-3d;
}
#div1:hover #div2{
-webkit-transform:rotateX(90deg) scale3d(0,0,0);
}
#div2{
width:200px;
height:200px;
-webkit-transform:rotateX(20deg);
-webkit-transform-origin: bottom;
background-color: red;
-webkit-transition:all 1s;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
在上面这个代码中，如果scale3d（0,0,0）改成scale3d（1,1,1），那么效果又是有的，很奇怪o(╯□╰)o
是不是有什么顺序的？测试过几个例子，发现只要和scale扯上关系 就很可能出现问题，而如果只有位移和旋转就不会。。。
代码2如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
perspective:800px;
perspective-origin:50% 50%;
-webkit-transform-style: preserve-3d;
}
#div1:hover #div2{
-webkit-transform:rotateX(90deg) scale3d(0,0,0);
}
#div2{
width:200px;
height:200px;
-webkit-transform:scale3d(1,1,1);
-webkit-transform-origin: bottom;
background-color: red;
-webkit-transition:all 1s;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
一样的问题，中间效果没有，但是如果把rotate在hover的时候去掉，或者在之前多加一个，那么效果又是有的。。。。。。
T T有人知道是为什么吗。。。。一直想不通。好纠结
感觉这个问题要误解了。。。。。。。。。。。。。。。。。。。。
#div1 {
perspective: 800px;
perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
}
#div1:hover #div2 {
-webkit-transform: rotateX(90deg) scale3d(0,0,0);
}
#div2 {
width: 200px;
height: 200px;
-webkit-transform: rotateX(20deg) scale3d(1,1,1);
-webkit-transform-origin: bottom;
background-color: red;
-webkit-transition: all 1s;
}