How to make the cube rotate along the axis?

Question

If you change the .page property of the transform , that is, change deg , then the block rotates around its edge, is it possible to make it rotate relative to the center?

 * { margin: 0; padding: 0; } .container { transform-style: preserve-3d; } .page { transform-origin: 50% 50%; transform-style: preserve-3d; backface-visibility: hidden; transform-origin: center center; margin: 100px; margin-left: 400px; position: relative; transform: rotateX(20deg); perspective: 800px; } .slide { position: absolute; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #c8d6e5; } .slide:nth-child(1) { background-color: #1dd1a1; transform: translateZ(150px); } .slide:nth-child(2) { background-color: #feca57; transform: rotateX(90deg) translateZ(150px); } .slide:nth-child(3) { background-color: #ff6b6b; transform: rotateX(-90deg) translateZ(150px); } .slide:nth-child(4) { background-color: #48dbfb; transform: rotateY(180deg) translateZ(150px); }

 <div class="container"> <div class="page"> <div class="slide"> We are creative </div> <div class="slide"> We are cool </div> <div class="slide"> We are mazing </div> <div class="slide"> We are super </div> </div> </div>

Answer 1 · 2019-03-26T18:37:53

Here is the cube that I did a long time ago, it can help you figure it out (replaced the color gamut and the text on the sides of the cube, according to the pattern shown):

 $(function(){ $(document).mousemove(function(e){ $('.cube').css({ 'transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)' }) }); });

 * { box-sizing: border-box; } body { background-color: #f5f5f5; } .wrapper { position: relative; margin: 200px auto; width: 300px; height: 300px; perspective: 3000px; } .cube { width: 300px; height: 300px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 45deg); } .side { position: absolute; width: 300px; height: 300px; border: 1px solid green; font: normal 40px Arial; text-align: center; line-height: 300px; color: #c8d6e5; } .front { transform: translateZ(150px); } .back { transform: rotateY(180deg) translateZ(150px); } .right { transform: rotateY(90deg) translateZ(150px); background-color: #feca57; } .left { transform: rotateY(-90deg) translateZ(150px); background-color: #ff6b6b; } .top { transform: rotateX(90deg) translateZ(150px); background-color: #48dbfb; } .bottom { transform: rotateX(-90deg) translateZ(150px); background-color: #1dd1a1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="cube"> <div class="side front"></div> <div class="side back"></div> <div class="side right">We are cool</div> <div class="side left">We are mazing</div> <div class="side top">We are super</div> <div class="side bottom">We are creative</div> </div> </div>

Lies quite a while on my abandoned Codepen

Further, different variations on the topic:

Vertical three-dimensional cube slider (without JS)

Horizontal three-dimensional cube slider (without JS)

Also, this is an interesting option.

On CSS-tricks, the cube creation process was well analyzed.