TAG
CSS
Result
Run
License
<div class="cube-wrapper" data-label="perspective(700px)"> <div class="cube-front">Front</div> <div class="cube-top">Top</div> <div class="cube-left">Left</div> </div> <div class="cube-wrapper" data-label="perspective(200px)"> <div class="cube-front">Front</div> <div class="cube-top">Top</div> <div class="cube-left">Left</div> </div>
html { min-height: 100vh; background-image: linear-gradient(to top, hwb(200 0% 0%) 10%, hwb(200 0% 0% / 0) 40%); } .cube-wrapper { width: 100px; height: 100px; transform-style: preserve-3d; position: relative; top: calc(50vh - 50px); } .cube-wrapper:nth-of-type(1) { left: calc(20vw - 50px); transform: perspective(700px) rotateX(-30deg) rotateY(45deg); } .cube-wrapper:nth-of-type(2) { left: calc(70vw - 50px); transform: perspective(200px) rotateX(-30deg) rotateY(45deg); } .cube-wrapper > div { position: absolute; width: 100px; height: 100px; text-align: center; line-height: 100px; font-weight: bold; font-size: 30px; } .cube-wrapper::before { content: attr(data-label); position: absolute; top: -60px; font-size: 15px; } .cube-front { background-color: #FF0000; transform: translate3d(0, 0, 50px); } .cube-top { background-color: #FFFF00; transform: rotateX(90deg) translate3d(0, 0, 50px); } .cube-left { background-color: #00FF00; transform: rotateY(-90deg) translate3d(0, 0, 50px); }
Console
expand_less
License
License
by DevDic
Close