CODEWITHSUNDEEP
jquerycsstextflip
grownupteeth
grownupteeth

Reputation: 131

Flip text upside down on the horizontal axis on hover - jquery or css

A client is asking for a flip effect on the menu items of their site - on hover, the items should flip upside down on the horizontal axis and then return to their original position. Similar to the second example here : http://daynin.github.io/wodry/#examples, but on hover only.

Googling hasn't turned up any answers so far, but I'm not sure what to search for...Does anyone have suggestions for a cross-browser, lightweight solution?

Thanks in advance.

Upvotes: 1

Views: 5080

Answers (2)

BJack
BJack

Reputation: 2534

For this type of effect I typically use transform: scaleY(-1); to flip elements. You can also use scaleX() for the opposite axis. Larger values will scale the content, so if you need it to be 1:1 scale just use -1. lets say you use -2, it would still flip the content, but it would be twice the size along the axis.

Codepen example

<!-- html -->
<div class="wrapper">
    <h1> Some Text </h1>
</div>

/* CSS */
.wrapper{
  width: 250px;
  background: #09c;
  padding:1em;
}
h1{
  margin: 0 auto;
  padding:0;
  text-align:center;
  transition: all 0.4s ease;
}
.wrapper:hover h1{
  transition: all 0.4s ease;
  transform: scaleY(-1);
}

edit: updated quickly to flip just the text instead of the whole element.

Upvotes: 2

Luca
Luca

Reputation: 9735

css transform: translate3d(x, y, z) is where you should start looking, together with css animations.

Upvotes: 0

Related Questions