TAG
CSS
Result
Run
License
<div class="cube-wrapper"> <div class="cube-front">Front</div> <div class="cube-back">Back</div> <div class="cube-top">Top</div> <div class="cube-bottom">Bottom</div> <div class="cube-left">Left</div> <div class="cube-right">Right</div> </div>
:root { --R: calc(pi * 2 / 360); /* pi is 3.141592653589793 */ --angle: 45; } .cube-wrapper { --applyAngle: calc(var(--angle) * var(--R)); width: 100px; height: 100px; transform-style: preserve-3d; transform: perspective(700px) rotateX(-30deg) rotateY(45deg); position: relative; left: calc(50vw - 50px); top: calc(50vh - 50px); transition: 0.3s; } .cube-wrapper:hover { transform: perspective(700px) rotateX(-30deg) rotateY(45deg) matrix3d( 1, 0, 0, 0, 0, cos(var(--applyAngle)), sin(var(--applyAngle)), 0, 0, sin(var(--applyAngle) * -1), cos(var(--applyAngle)), 0, 0, 0, 0, 1 ); } .cube-wrapper > div { position: absolute; width: 100px; height: 100px; text-align: center; line-height: 100px; font-weight: bold; font-size: 20px; } .cube-front { background-color: #FF0000; transform: translate3d(0, 0, 50px); } .cube-back { background-color: #0000FF; transform: rotateY(180deg) translate3d(0, 0, 50px); } .cube-top { background-color: #FFFF00; transform: rotateX(90deg) translate3d(0, 0, 50px); } .cube-bottom { background-color: #de0081; transform: rotateX(-90deg) translate3d(0, 0, 50px); } .cube-left { background-color: #00FF00; transform: rotateY(-90deg) translate3d(0, 0, 50px); } .cube-right { background-color: #f77c1c; transform: rotateY(90deg) translate3d(0, 0, 50px); }
Console
expand_less
License
License
by DevDic
Close