css - transform后参数不同，rotate无法正常触发transition的问题。
本文介绍了css - transform后参数不同，rotate无法正常触发transition的问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test{
margin: 50px;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
transform: rotate(0) translateX(5px);
}
/*css1*/
.test:hover{
transform: rotate(360deg);
}
/*css2*/
#btn:hover+.test{
transform: rotate(360deg) translateX(0px);
}
</style>
</head>
<body>
<button id="btn">css2</button>
<div class="test">
css1
</div>
</body>
</html>
简化了一下样式还是要问呀。
1.初始样式为rotate(0) translateX(5px);过渡至css1,只能触发translateX(5px)的过渡效果。
2.过渡至css2,可以看到平移5px和旋转360度的效果。
如果说rotate的过渡表现是(初始-最终)%360的话，为什么前者是0deg而后者是360deg。
总结一下就是前后transform后具体属性值和属性顺序不匹配则无法有效触发rotate的过渡，是什么原因。
不匹配举例:
1.从transform: rotate(0) translateX(5px);至transform: rotate(360deg);
2.从transform: rotate(0) translateX(5px);至transform: translateX(5px) rotate(360deg);
3.从transform: translateX(5px);至transform: translateX(5px) rotate(360deg);
https://jsfiddle.net/23cc8LvL/
解决方案
传送门答案在此。
这篇关于css - transform后参数不同，rotate无法正常触发transition的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
