CODEWITHSUNDEEP
css3dcss-shapesperspective
k-Dushi
k-Dushi

Reputation: 23

create a rounded rectangle in 3d perspective with css

Can anyone help me with creating the following rounded rectangle in 3d perspective with css?

image: rounded rectangle in 3d perspective

Upvotes: 0

Views: 1246

Answers (1)

Eli Crow
Eli Crow

Reputation: 129

You could use the css3 rules of perspective and transform: rotate(...). See the example below. Try playing with the rotation rule's x, y, and z arguments until you get the angle you want.

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>

Upvotes: 2

Related Questions