about transform property in css

Question

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

as you can see i used transform:translate() property to center the div.and i want it rotate about 10deg when i hover on the div but it isn't happening i know its because i used translate property to center the div ,when i commented that part out it working fine. i just want to know what causing this behavior.

score 0 · Answer 1 · answered May 17 '21 at 11:34

Change transform: rotateZ(10deg) to transform: translate(-50%, -50%) rotateZ(10deg); to keep the traslate value along with rotate. Otherwise you're overriding translate with rotate on hover and the element will move to it's actual position and rotate from there.

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

about transform property in css

1 Answers1