CODEWITHSUNDEEP
csstransform
Rasmus Pedersen
Rasmus Pedersen

Reputation: 5

CSS Transform rotatexXand rotateY

i made this transform thing, and now i want it to start with being: transform: rotateX(15deg) rotateY(180deg); and then transform to normal(so it is doing it conversely), is that possible and how? 

<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>

Upvotes: 0

Views: 75

Answers (1)

Scott
Scott

Reputation: 21882

Just add the transformations to the basic CSS, then set them to 0 for the effect class.

  div{
border-style: solid;
width: 350px;
height: 400px;
transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
p {
float: left;
font-size: 90px;}

.effect1
{     
transition-duration: 2s;
transform: rotateX(0deg) rotateY(0deg);}

jsFiddle Expample

You can also make the button flip the box
back and forth by using toggleClass in the jQuery: sample

Upvotes: 1

Related Questions