.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">4.</div> <div class="side bottom"></div> </div>

And you need to be like this: enter image description here

  • You can rotate it, but you initially the picture is not the same as you need. jsfiddle.net/3L6qfLq3 after I turned it, it changed its dimensions. Cut the picture correctly. - stackanon

2 answers 2

  transform: rotateZ(63deg);

But your pictures, in my opinion, are crooked, stretched, you have 68x87, whatever one may say, it will still be miserable. The proportions are not correct. Substitute space 63 for any value you want.

    You can try to use the picture as a background image.

     .front { transform: rotateX(-40deg) rotateY(42deg) translateZ(60px); z-index: 1000; background-image: url(http://i6.pixs.ru/storage/5/1/0/ico1png_3409525_23310510.png); }