Question

任何人都可以帮我用css在3d透视图中创建以下圆角矩形吗？

image: rounded rectangle in 3d perspective

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: