I've created a transformation effect using CSS, and now I'm looking to start with a specific rotation (rotateX(15deg) rotateY(180deg)) and then animate it back to its original position. Is there a way to achieve this reversal effect and how can it be done?
<html>
<head>
<title>Tester</title>
<meta charset="UTF-8">
<style type="text/css" >
div{
border-style: solid;
width: 350px;
height: 400px;
margin-top: 50px;
margin-left: 512px; }
p{
float: left;
font-size: 90px;}
.effect1
{
-moz-transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
</style>
</head>
<body>
<div>
<p>some text</p>
</div>
<button>Magic</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function(){
box = $("div");
box.addClass('effect1');
});
</script>
</body>