css Question posted in
Some basic documentation can be found here.

CSS Rotation isn't rotating the way I think it should

I’ve isolated this as much as I can …

And indeed the copyright info is rotated correctly, reading up and down along the left edge.

However, when I hover over the parent <div> instead of rotating 90º degrees, so that ireading left-to-right along the bottom edge, it rotates 180º so that it is facing the opposite way!

The only way to get the text to transition from reading up and down along the left edge, to reading right to left along the bottom is to rotate it 360º, which makes no sense to me.

What on earth have I done?

.parent {
  height: 100vh;
}

.copy-txt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
}

.copy-txt > a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.copyright {
  position: absolute;
  rotate: -90deg;
  transition: rotate 0.3s ease-in-out;
  margin-left: 45px;
  background-color: rgb(10, 28, 46);
  width: 150px;
  height: 60px;
  padding-top: 0px;
  top: 40%;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.parent:hover .copyright {
  display: block;
  rotate: 360deg;
  transition: rotate 0.3s ease-in-out;

}
<div class="parent">
  <div class="copyright">
    <p>
      <span class="copy-txt">
        &copy;&nbsp;<a href="https://davidgs.com/">David G. Simmons 2023
        </a>
      </span>
      <br />
      <span class="copy-txt">All rights reserved</span>
    </p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You are trying to get the copyright div to the normal position right? The problem is, when you are declaring the rotate rule in the :hover, you basically overwrite the rotate rule declared in the non-hover selector instead of adding it up.

    So your code should look like this:

    .parent:hover .copyright{
    rotate: 0deg
}
    Login or Signup to reply.
  2. 0 
    .parent {
  height: 100vh;
}

.copy-txt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
}

.copy-txt > a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.copyright {
  transform-origin:0% 100%;
  position: absolute;
  rotate: -90deg;
  transition: rotate 0.3s ease-in-out;
  margin-left: 75px;
  background-color: rgb(10, 28, 46);
  width: 150px;
  height: 60px;
  padding-top: 0px;
  top: 40%;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.parent:hover .copyright {
  display: block;
  rotate: 0deg;
  transition: rotate 0.3s ease-in-out;
    <div class="parent">
  <div class="copyright">
    <p>
      <span class="copy-txt">
        &copy;&nbsp;<a href="https://davidgs.com/">David G. Simmons 2023
        </a>
      </span>
      <br />
      <span class="copy-txt">All rights reserved</span>
    </p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search