There is such a cube

I need to pull a div on its top face like that. It is clear that there can not do without transform. I tried through rotate3d, but I can’t correctly determine the angles, I already broke my head. In essence, you need to take a square block, rotate it 45 degrees along the Z axis, and then, as it were, turn the resulting structure 45 degrees along the X axis. But it doesn't work as it should. Anyone who understands transform 3d in css, can you tell me how?

    2 answers 2

    I used the tridiv service, but I'm not sure that it will help you.

    /* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.imtqy.com/prefixfree/) /!\ */ #tridiv { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; font-size: 100%; } .face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); } .scene, .shape, .face, .face-wrapper, .cr { position: absolute; transform-style: preserve-3d; } .scene { width: 80em; height: 80em; top: 50%; left: 50%; margin: -40em 0 0 -40em; } .shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%; } .face, .face-wrapper { overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; /* hidden by default, prevent blinking and other weird rendering glitchs */ } .face { background-size: 100% 100%!important; background-position: center; } .face-wrapper .face { left: 100%; width: 100%; height: 100% } .photon-shader { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .side { left: 50%; } .cr, .cr .side { height: 100%; } [class*="cuboid"] .ft, [class*="cuboid"] .bk { width: 100%; height: 100%; } [class*="cuboid"] .bk { left: 100%; } [class*="cuboid"] .rt { transform: rotateY(-90deg) translateX(-50%); } [class*="cuboid"] .lt { transform: rotateY(90deg) translateX(-50%); } [class*="cuboid"] .tp { transform: rotateX(90deg) translateY(-50%); } [class*="cuboid"] .bm { transform: rotateX(-90deg) translateY(-50%); } [class*="cuboid"] .lt { left: 100%; } [class*="cuboid"] .bm { top: 100%; } /* .cub-1 styles */ .cub-1 { transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1; width:10em; height:10em; margin:-5em 0 0 -5em; } .cub-1 .ft { transform:translateZ(5em); } .cub-1 .bk { transform:translateZ(-5em) rotateY(180deg); } .cub-1 .rt, .cub-1 .lt { width:10em; height:10em; } .cub-1 .tp, .cub-1 .bm { width:10em; height:10em; } .cub-1 .face { background-color:#FFFFFF; } 
     <div id="tridiv"> <div class="scene" style="-webkit-transform:rotateX(-45deg) rotateY(-45deg); -moz-transform:rotateX(-45deg) rotateY(-45deg); -ms-transform:rotateX(-45deg) rotateY(-45deg); transform:rotateX(-45deg) rotateY(-45deg); "> <div class="shape cuboid-1 cub-1"> <div class="face ft"> <div class="photon-shader" style="background-color: red;"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: black;"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: black;"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: green;"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: black;"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: blue;"></div> </div> </div> </div> </div>

      Solved the problem otherwise. Instead of a div, I took a table. Immediately turned to turn as it should. And implement line highlighting when hovering so much easier. Maybe someone will come in handy.