关于 css 中的变换属性 [重复]

Question

这个问题在这里已经有了答案：

如何以 animation 的比例保持图像中心的原点？ (1 个回答)

4 个月前关闭。

 * { padding: 0; margin: 0; } div { /* background-image: url(img/pic-1.png); */ background-color: green; background-repeat: no-repeat; width: 10vw; height: 30vh; border-radius: 10px; padding: 0.5em; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; } div:hover { box-shadow: 5px 5px 2px greenyellow; transform: rotateZ(10deg); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style,css" /> <title>Document</title> </head> <body> <div>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Molestias, nihil!</div> </body> </html>

如您所见，我使用 transform:translate() 属性将 div 居中。当我在 div 上使用 hover 时，我希望它旋转约 10 度，但它没有发生，我知道这是因为我使用 translate 属性将 div 居中，当我评论说它工作正常。 我只想知道是什么导致了这种行为。

Answer 1

transform: rotateZ(10deg)改为transform: translate(-50%, -50%) rotateZ(10deg); 保持traslate值与rotate 。 否则，您将在 hover 上使用rotate覆盖translate ，元素将移动到它的实际 position 并从那里旋转。

 * { padding: 0; margin: 0; } div { /* background-image: url(img/pic-1.png); */ background-color: green; background-repeat: no-repeat; width: 10vw; height: 30vh; border-radius: 10px; padding: 0.5em; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; } div:hover { box-shadow: 5px 5px 2px greenyellow; transform: translate(-50%, -50%) rotateZ(10deg); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style,css" /> <title>Document</title> </head> <body> <div>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Molestias, nihil!</div> </body> </html>