私はこのトランスフォームを作ったが、今はそれが存在しているから始める：transform：rotateX（15deg）rotateY（180deg）;それから、通常に変換する（逆にそれをやっている）、それは可能なのか？CSSトランスフォーム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

ちょうどそのeffectクラスのために0にそれらを設定し、基本的なCSSに変換を追加します。

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

また、ボタンはjQueryのでtoggleClassを使用することにより、前後ボックス
を反転させることができます。sample

出典

2016-08-08 23:01:48 Scott

CSSトランスフォームrotatexXand rotateY

答えて

jsFiddle Expample

関連する問題