2

Есть вот такой куб

Мне нужно натянуть на его верхнюю грань div так. Понятно, что здесь без transform не обойтись. Я пробовал через rotate3d, но никак не получается правильно определить углы, уже голову сломал. По сути нужно взять квадратный блок, повернуть его на 45 градусов по оси Z, а затем, как бы, получившуюся конструкцию повернуть на 45 градусов по оси X. Но так, как нужно, не получается. Кто-нибудь, кто разбирается в transform 3d в css, можете подсказать, как правильно?

2 ответа 2

0

Воспользовался сервисом tridiv, но не уверен что это вам поможет.

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/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>

0

Решил проблему иначе. Вместо div'а взял table. Сразу получилось повернуть так, как надо. И реализовать подсвечивание строк при наведении так куда проще. Может быть, кому-нибудь пригодится

Ваш ответ

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

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