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>
<!-- container would have your background image -->
<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>
In .aspx page , write a <div> container in <body> tag which contains text which need to be flip.
Like -
<div>
<!-- container would have your background image -->
<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>
<form id="form1" runat="server">
<div class="flip-vertical">
<!-- container would have your background image -->
<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 ..
Output will be -
on mouse over text will be like -
Happy Coding ..
