CSS 3Dトランスフォームがフラットに表示されています

ホバーオンの場合、ボタンは反転しますが、パースペクティブを表示できません。これは、アニメーションの平面図のようなものです。 perspectiveプロパティを間違って使用していますか？CSS 3Dトランスフォームがフラットに表示されています

@import 'https://necolas.github.io/normalize.css/latest/normalize.css'; 
 
/* //////////////////////////////// INITIAL //////////////////////////////// */ 
 
html, body{ height:100% } body{ background:#eee } 
 
#btn { 
 
    display:block; width:100px; height:100px; margin:0 auto; position:relative; 
 
    transform:translateY(-50%); top:50%; background:#333; color:#eee; border:0; 
 
    outline:0; text-transform:uppercase 
 
} 
 
/* //////////////////////////////// _PERSP_ //////////////////////////////// */ 
 
#btn{ perspective:1000px } 
 
#btn:hover { transform:rotateX(180deg); transform-style:preserve-3d } 
 
/* //////////////////////////////// _TRANS_ //////////////////////////////// */ 
 
#btn{ transition-property: transform; transition-duration:1s }

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> 
 
    <link rel="stylesheet" href="base.css"> <title>web | animation</title> 
 
    </head> 
 
    <body> 
 
    <button id="btn">button</button> 
 
<!-- ------------------------------ COMMENT ------------------------------- --> 
 
    </body> 
 
</html>

出典

2016-07-15 sol acyon

[OK]を最初に、あなたのブラウザでハードウェアアクセラレーションを有効にする必要があります。第二に、あなたがこのようなブラウザ固有の接頭辞を使用します。このような構造のようなものを試してみてください

-webkit-transform: perspective(600px) rotateY(-180deg); 
-moz-transform: perspective(600px) rotateY(-180deg);

を：

<div id="parent"> 
    <button id="button">button</button> 
</div>

はCSS：

#parent { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
} 
#button { 
    width: 100%; 
    height: 100%; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 1.0s linear; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
} 
#parent:hover #button { 
    -webkit-transform: perspective(600px) rotateY(-180deg); 
    -moz-transform: perspective(600px) rotateY(-180deg); 
}

出典

2016-07-15 19:13:07

CSS 3Dトランスフォームがフラットに表示されています

答えて

関連する問題