Ich habe diese Transformation Ding, und jetzt möchte ich es mit zu sein: transform: rotateX (15deg) rotateY (180deg); und transformiere dann zu normal (so macht es umgekehrt), ist das möglich und wie?CSS-Transformation rotatexXand rotateY

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

2016-08-08 Rasmus Pedersen

einfach die Transformationen auf die grundlegende CSS hinzufügen, dann setzen sie für die effect Klasse 0.

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

können Sie auch die Taste, um die Box-Flip
hin und her durch toggleClass in der Verwendung von jQuery: sample

Quelle

2016-08-08 23:01:48 Scott

CSS-Transformation rotatexXand rotateY

Antwort

jsFiddle Expample

Verwandte Themen