Technology Curiosity: How to flip text or image vertical on mouse over in CSS ?

This tutorial is about flip any text or image verticaly by using CSS class.
In .aspx page , write a <div> container in <body> tag which contains text which need to be flip.
Like -

<div>

<h3> Hello There!</h3>
<p> Here is some text</p>
</div>

after that , create CSS class which will do the magic of flip

<style type="text/css">

.flip-vertical :hover
{
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

</style>

and use this class in <div> tag , so that text written in it will start flip on mouse over.
The complete code would be like :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">

.flip-vertical :hover
{
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

</style>

<body>

<h3>

Hello There!</h3>

<p>

Here is some text</p>

</div>

</form>

</body>

</html>

That's it !!! Copy this code and see the magic.

For flipping image, just change text part with any image and this CSS will do the same magic.

Note : This CSS is tested on Crome,Mozilla and IE 10.It's not supported by IE 9 or less version.
Output will be -

on mouse over text will be like -

Happy Coding ..

Technology Curiosity

Monday, 25 February 2013

How to flip text or image vertical on mouse over in CSS ?

2 comments: