CSS 3D-Transformation erscheint flach (orthografisch?)

Beim Schwenken dreht sich die Schaltfläche, zeigt aber keine Perspektive. Es ist wie eine flache orthografische Ansicht der Animation. Verwende ich die perspektivische Eigenschaft falsch?CSS 3D-Transformation erscheint flach (orthografisch?)

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

Quelle

2016-07-15 sol acyon

Ok zuerst müssen Sie die Hardwarebeschleunigung in Ihrem Browser aktivieren. Zweitens verwenden Sie browserspezifische Präfixe wie folgt aus:

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

Probieren Sie etwas wie diese Struktur:

<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); 
}

Quelle

2016-07-15 19:13:07

CSS 3D-Transformation erscheint flach (orthografisch?)

Antwort

Verwandte Themen