Question

悬停按钮会翻转，但无法显示透视图。这就像动画的平面正交视图。我使用perspective属性错了吗？

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

首先，您需要在浏览器中激活硬件加速。其次，您使用浏览器特定的前缀，如下所示：

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

CSS 3D变换看似扁平（正交？）

1 个答案: