Question 245312 in Html Question posted in
Some basic documentation can be found here.

Html – rotate tekst on hover

I want to let my tekst rotate when you hover over it.
this is my css code:
html:

  <p class="dot">R</p>

css:

.dot {
height: 100px;
width: 100px;
background-color: #ffeaa7;
border-radius: 50%;
display: flex; 
justify-content: center; 
align-items: center; 
position: relative;
text-align: center; 
margin: 2px;
filter: brightness(30%);
transition: 0.5s;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',  Geneva, Verdana, sans-serif;
font-size: 30px;
transform: rotate('0deg');
}


.dot:hover{
filter: brightness(100%);
font-size: 65px;
transform: rotate('45deg');
}

I tried to add the transform: rotate(’45deg’);
but that didn’t do it so i added at the orginal the same line of code but then with 0deg

Tags:

4

Answers


  1. 0

    Remove apostrophes.

    transform: rotate(45deg);
    Login or Signup to reply.
  2. 0

    To rotate text on hover, you can use the CSS transform property. In your current code, you are already using the transform property to rotate the text, but you need to change the value of the rotation angle to achieve the desired effect. Instead of using a fixed angle of 45 degrees, you can use the CSS transition property to smoothly animate the rotation of the text on hover. Here’s an example of how you can modify your code to achieve this effect:

    .dot {
  /* your existing styles */
  transition: transform 0.5s ease;
}

.dot:hover {
  transform: rotate(360deg);
}

    NB : Don’t forget to remove the apostrophes for values in degrees

    Login or Signup to reply.
  3. 0

    Do you mean like this?

    .dot {
height: 100px;
width: 100px;
background-color: #ffeaa7;
border-radius: 50%;
display: flex; 
justify-content: center; 
align-items: center; 
position: relative;
text-align: center; 
margin: 2px;
filter: brightness(30%);
transition: 0.5s;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',  Geneva, Verdana, sans-serif;
font-size: 30px;
}


.dot:hover{
filter: brightness(100%);
font-size: 65px;
transform: rotate(360deg);
}
     <p class="dot">R</p>
    Login or Signup to reply.
  4. 0 
    .dot {
  height: 100px;
  width: 100px;
  background-color: #ffeaa7;
  border-radius: 50%;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative;
  text-align: center; 
  margin: 2px;
  filter: brightness(30%);
  transition: 0.5s transform ease;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',  Geneva, Verdana, sans-serif;
  font-size: 30px;
  transform: rotate(0deg);
}


.dot:hover{
  filter: brightness(100%);
  font-size: 65px;
  transform: rotate(45deg);
}
    <p class="dot">R</p>

    I have updated css – Removed single quote from the transform property (transform: rotate(’45deg’);

    FYI: if you want to rotate full you need to add 360deg instead of 45deg

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search