用 css 在 3d 透视图中创建一个圆角矩形答案

【问题标题】：create a rounded rectangle in 3d perspective with css用 css 在 3d 透视图中创建一个圆角矩形
【发布时间】：2017-04-07 02:39:51
【问题描述】：

谁能帮我用 css 在 3d 透视图中创建以下圆角矩形？

image: rounded rectangle in 3d perspective

【问题讨论】：

标签： css 3d css-shapes perspective

【解决方案1】：

您可以使用perspective 和transform: rotate(...) 的css3 规则。请参见下面的示例。尝试使用旋转规则的 x、y 和 z 参数，直到获得所需的角度。

body, html {
 width: 100%;
 height: 100%;
}

body {
  /* 
  place this rule on the parent
  the amount of perspective distortion 
  */
  perspective: 500px;
}

.perspective {
  background: black;
  width: 200px;
  height: 200px;
  margin: 20px 10px;
  
  border-radius: 20px;
  
  /* 
  the first three parameters are x, y, z, a rotation vector to specify the axis you want to rotate around:
  ((1, 0, 0) is the x-axis)
  the 4th parameter is the amount of rotation
  */
  transform: rotate3d(1,0,0, -25deg);
}

<body>
  <div class="perspective"></div>
</body>

【讨论】：