JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<div class="wrap">
  <h1>rotate 부모에 perspective</h1>
  <div class="outerBox perspective">
    <div class="innerBox">rotate</div>
    <div class="innerBox">rotate</div>
    <div class="innerBox">rotate</div>
  </div>
  <p>rotateX(45)</p>
</div>
<div class="wrap">
  <h1>rotate 자식에 perspective</h1>
  <div class="outerBox no-perspective">
    <div class="perspective innerBox">rotate</div>
    <div class="perspective innerBox">rotate</div>
    <div class="perspective innerBox">rotate</div>
  </div>
  <p>rotateX(45)</p>
</div>

CSS

.wrap {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.outerBox {
  margin: 5px auto;
  background: skyblue;
}
.innerBox {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  background: yellow;
  transform: rotateX(45deg)
}
.no-perspective .innerBox {
  transform:perspective(300px) rotateX(45deg)
}
.perspective {
  perspective: 300px;
}