sol acyon sol acyon - 4 months ago 24
HTML Question

CSS 3D transform appears flat ( orthographic? )

On hover the button flips but fails to show perspective. It's just like a flat orthographic view of the animation. Am I using the perspective property wrong?



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




Answer

It isn't displaying right for 2 reasons: 1: The perspective property isn't cross-browser friendly yet. It currently will only work in IE10/Edge ? without the prefix. 2: You must apply perspective to a parent element of the element you are trying to flip in this case.

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