2

.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>

А нужно чтобы было вот так: введите сюда описание изображения

1
  • Повернуть то можно, только у вас изначально картинка не такая, как нужно. jsfiddle.net/3L6qfLq3 после того, что я ее повернул она поменяла свои размеры. Вырежьте правильно картинку.
    – stackanon
    17 сен 2016 в 2:59

2 ответа 2

1
    transform: rotateZ(63deg);

Но у вас картинки по-моему кривые, растянуты, они у вас 68х87 как ни крути все равно будет убого. Пропорции не верны. Подставляйте место 63 любое значение которое нужно.

1

Можно попробовать использовать картинку как фоновое изображение.

.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);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.