Need help with CSS rotateY hover button

1

I made 3 CSS boxes to try rotateY property that works if we hover the button inside those boxes.

The problem is the text inside the button is not aligned with what it should be (if we hover the button)

this is what happens if we hover the button :

Screen Shot 2020-07-11 at 16.30.19
Screen Shot 2020-07-11 at 16.30.191280×800 82.6 KB

Screen Shot 2020-07-11 at 16.30.19
Screen Shot 2020-07-11 at 16.30.191280×800 289 KB

here is my pen https://codepen.io/aldhaneka/pen/ZEQRRXP

2

the css rotate y is the black sheep :upside_down_face:

when you apply styles for the button it also affects its inner elements. So wrap the inner text with some HTML tags. Hope this helps

If you want to know more read about dom tree

<h5 class="btn"><i>BUY NOW</i></h5>
// SCSS APPROCH
.btn:hover {
    border: 5px solid cyan;
    background-color: transparent;
    color: cyan;
    transform: rotateY(180deg);
    i {
      transform: rotateY(-180deg);
     }
}
3

Usually, with a flip effect, you use a front face and a back face.
https://3dtransforms.desandro.com/card-flip

Google: flip card

1 Like
4

thank you, for give me a link to learn about CSS flip effect but I already solved it.

5

it’s already solved, i created btn.parent class in the div that the parent of <a> and the h5 for example :

<div class="btn-parent">
       <a href="LO.css">
            <h5 class="btn">BUY NOW</h5>
       </a>
</div>

and then I added some code into the CSS code

this is the code before solved :

.btn:hover {
    border: 5px solid cyan;
    background-color: transparent;
    color: cyan;
    transform: rotateY(180deg); 
}

this is the code after solved:

.btn-parent:hover {
  transform: rotateY(180deg);
}

.btn-parent:hover .btn {
  border: 5px solid cyan;
  background-color: transparent;
  color: cyan;
  transform: rotateY(180deg);
}

in that case, I created a btn-parent class in the div that the parent of <a> and the h5 and I add:

.btn-parent:hover {
  transform: rotateY(180deg);
}

it’s not solved by myself it’s solved by other web developer forum community (not in this forum web but another forum web ). but Thank you Guys for helping me!

6

it’s not working, but thanks for helping me!