I need it to be bigger in width and height. I tried to change the width, but everything turned out crooked. The only way was zoom, but I don’t know how good the decision is.

.cube { padding: 50px; font-size: 4em; width: 500px; margin: auto; } .side { position: absolute; width: 120px; height: 120px; background: #47a759; color: white; text-align: center; line-height: 100px; } .front { transform: rotateX(-40deg) rotateY(42deg) translateZ(60px); z-index: 1000; } .top { transform: rotateX(-40deg) rotateY(42deg) rotateX(90deg) translateZ(60px); z-index: 1000; font-family: Tahoma; font-size: 50px; font-weight: 700; line-height: 100px; text-transform: uppercase; } .right { transform: rotateX(-40deg) rotateY(42deg) rotateY(90deg) translateZ(60px); } .left { transform: rotateX(-40deg) rotateY(42deg) rotateY(-90deg) translateZ(60px); z-index: 1000; background-color: #479754; } .bottom { transform: rotateX(-40deg) rotateY(42deg) rotateX(-90deg) translateZ(60px); } .back { transform: rotateX(-40deg) rotateY(-138deg) translateZ(60px); } 
 <div class="cube"> <div class="side front"> <img src="http://i6.pixs.ru/storage/5/1/0/ico1png_3409525_23310510.png" alt=""> </div> <div class="side back"></div> <div class="side right"></div> <div class="side left"></div> <div class="side top"></div> <div class="side bottom">2</div> </div>

    1 answer 1

    Change the class. Side width and height and translateZ everywhere in the same proportions. In this example, increased by 2. To rotate change rotateY .

     div.test { xwidth: 100%; xperspective: 750px; height: 200px; } .cube { padding: 50px; font-size: 4em; width: 500px; margin: auto; } .side { position: absolute; width: 200px; height: 200px; background: #85cd66; border: 1px solid black; color: white; text-align: center; line-height: 200px; } .front { transform: rotateX(-40deg) rotateY(62deg) translateZ(100px); z-index: 1000; } .top { transform: rotateX(-40deg) rotateY(62deg) rotateX(90deg) translateZ(100px); z-index: 1000; } .right { transform: rotateX(-40deg) rotateY(62deg) rotateY(90deg) translateZ(100px); } .left { transform: rotateX(-40deg) rotateY(62deg) rotateY(-90deg) translateZ(100px); z-index: 1000; } .bottom { transform: rotateX(-40deg) rotateY(62deg) rotateX(-90deg) translateZ(100px); } .back { transform: rotateX(-40deg) rotateY(-118deg) translateZ(100px); } /* cuboid - 100 x 100 x 200 */ .cuboid .front { width: 200px; } .cuboid .top { width: 200px; } .cuboid .right { transform: rotateX(-40deg) rotateY(122deg) translateZ(150px); } .cuboid .back { width: 200px; } .cuboid .bottom { width: 200px; } 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"> <div class="test test1"> <h1></h1> <div class="cube"> <div class="side front"> <i class="zmdi zmdi-wrench "></i> 1 </div> <div class="side back"></div> <div class="side right"></div> <div class="side left"></div> <div class="side top">1.</div> <div class="side bottom">2</div> </div> </div>

    • Thank! And how to turn it a little? I change rotateY (32deg) to rotateY (40deg) everywhere, but the back side is still crooked. I would be grateful if you can help with this. - Alexander
    • @ Alexander updated the example with rotated. To rotate, use only rotateY - greybutton
    • Thank you, you helped me a lot. Finally, I wanted to ask why my icons are not rotated as it should? Now add the code in the post. - Alexander
    • Edited a post. - Alexander
    • It is better to return the post back and ask a new question, otherwise the one who finds your question will not understand what happened here. - greybutton