0

I have a button, which when clicked, should rotate on itself. But when doing transform: rotate(90deg), even if using transform-origin:center, it does weird rotations instead of rotating on itself(I cannot describe it, try clicking on it.)

Is there any way I could know where the origin of my button is and most importantly how can I set it to the center of this button.

body{
  background-color: #596275;
  margin: 0px;
}

.preload * {
 -webkit-transition: none !important;
 -moz-transition: none !important;
 -ms-transition: none !important;
 -o-transition: none !important;
 transition: none !important;
}

/*Centers "button"*/
.button, .button::after{
  position: fixed;
  display: block;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.button{
  width: 16vw;
  height: 16vw;
  background-color: #e77f67;
  border-style: none;
  transition: 0.5s;
  border-radius: 50%;
}
.button:hover{
  background-color: #f19066;
  margin-top: -2%;
}
.button:focus{
  border-style: none;
  background-color: #f19066;
  margin-top: -8.5vw;
  transform-origin: center;
  transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Phoenix</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body class="preload">
    <button type="button" name="button" class="button"></button>


    <script>
    document.body.classList.remove('preload')
    </script>

  </body>
</html>
MaxAnimator
  • 11
  • 1
  • Hi! Pseudo elements `:before` and `:after` you can't use without `content` property [::before and ::after](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) – Greg-- May 18 '21 at 15:01
  • It was a test I made earlier, there should not be any mentions of ::before nor ::after in my code, and this is not the issue. – MaxAnimator May 18 '21 at 15:04
  • It's not clear what you want to do, do you want to twist the round element around its center? What result do you expect? – Greg-- May 18 '21 at 15:04

0 Answers0