问题是: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有人知道是为什么吗。。。。一直想不通。好纠结