transform和transition组合动画错误问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>截图</title> <style> </style> </head> <style> div { width: 300px; height: 300px; margin: 0 auto; } .parent { position: relative; background: rgb(228, 70, 18); overflow: hidden; } .son { background: #121; transform-origin: right bottom; transform: rotate(90deg); transition: all 5s; transition: transform 5s; } .parent:hover .son { transition: all 5s; transition: transform 5s; transform-origin: right bottom; transform: rotate(0deg); } </style> <body> <div class="parent"> <div class="son"></div> </div> </body> </html>