<html><head lang="en"><meta charset="UTF-8"><title></title><style>li{width:100px;height:100px;background-color:#003399;list-style:none;color:#fff;transition: all 0.05s linear;margin-bottom:10px;}li.linear_translate:hover{transform:translate(20px,30px); /*平移属性*/}li.ease_skew:hover{/*transform:skew(30deg,30deg);*/transform:skew(30deg);transform:skew(0deg,30deg);/*倾斜属性*/}li.easeIn_scale:hover{transform:scale(2,.5); /*缩放属性*/}li.easeOut_rotate:hover{transform:rotate(30deg); /*旋转属性*/}</style></head><body><ul><li class="linear_translate">平移属性</li><li class="ease_skew">斜切属性</li><li class="easeIn_scale">缩放属性</li><li class="easeOut_rotate">旋转属性</li></ul></body></html>
如果觉得《前端：transition结合transform实现变形的平滑过渡效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
