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

Html – CSS effect on logo

I am trying to make a logo for header, however I want the last letter to be
inclined.

like this:

enter image description here

and when hovering to be straightened and fall back to it’s default position.

I tried this:

.nav-branding {
    text-decoration: none;
    color: black;
    font-size: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-branding span {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
  transform-origin: bottom center; /* Set the rotation origin to the bottom center */
  transform: rotate(-25deg);
}

.nav-branding span:hover {
  animation: fallAndBack 1s forwards; /* Play the animation on hover */
}

@keyframes fallAndBack {
  0%, 100% {
    transform: rotate(-25deg); /* Starting and ending position, same as initial rotation */
  }
  50% {
    transform: rotate(25deg); /* Rotate to the opposite direction at 50% */
  }
}
<a href="/" class="nav-branding">BARRETT<span>E</span></a>

But it is a little broken and whatever I do it gets worse can someone help.

Thank you in advance! <3

Tags:

2

Answers


  1. 0

    Add this instaed of that default animation

    @keyframes fallAndBack {
  0%{
    transform:rotate(-25deg);
}
  100%{
    transform:rotate(0deg);
  }
    Login or Signup to reply.
  2. 0

    I’m not sure what you mean by broken or getting worst. However, I’ve tried the following settings and looks pretty close to the image you provided.

    .nav-branding {
   display: inline-block;
   text-decoration: none;
   margin: 15px;
   color: blue;
   font-size: 2rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-branding span {
   float: right;
   margin: -4px 0rem 0rem 0.2rem;
   padding: 0px 0rem 0px 0rem;
   transform-origin: bottom right;
   transform: rotate(-16deg);
   transition: all ease 300ms; /* Adjust this to make it faster or slower */
}

.nav-branding:hover span {
   transform: rotate(0deg);
   margin: 0px 0rem 0rem -2px;
   padding: 0px 0rem 0px 0rem;
}
    <a href="/" class="nav-branding">BARRETT<span>E</span></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search