JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output" class="output large">
    <section id="default-example" class="default-example">
        <div id="example-element" class="transition-all layer parent">
            <p>Parent</p>
            <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
        </div>
    </section>
</div>

CSS

.output {
  height:600px;
    position: relative;
    float: right;
    background-color: #fff;
    width: 90%;
    overflow: hidden;
    box-shadow: 2px 2px 5px -2px rgb(0 0 0 / 20%);
    padding: 1em;
}

.output section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.output section {
    height: 100%;
    text-align: center;
}
.transition-all {
    transition: all .3s ease-in;
}

.layer {
    background: #f69d3c;
    border-radius: .75rem;
    transform: perspective(200px) rotateY(30deg);
}

.numeral {
    background-color: #e66465;
    border-radius: .2rem;
    color: #000;
    margin: 1rem;
    padding: .2rem;
    transform: rotate3d(1,1,1,45deg);
}

.parent { /*يمكنك التلاعب بقيمة الخاصية من هنا*/
  transform-style: preserve-3d; /* or flat */
}