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

【问题标题】：about transform property in css [duplicate]关于css中的变换属性[重复]
【发布时间】：2021-08-06 15:57:26
【问题描述】：

* {
  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 上时，我希望它旋转约 10 度，但它没有发生，我知道这是因为我使用 translate 属性将 div 居中，当我评论说它工作正常。我只想知道是什么导致了这种行为。

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

将transform: rotateZ(10deg) 更改为transform: translate(-50%, -50%) rotateZ(10deg); 以将traslate 值与rotate 保持一致。否则，您将在悬停时用rotate 覆盖translate，元素将移动到它的实际位置并从那里旋转。

* {
  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>

【讨论】：