плоскость rotate 3d в css

312

25 июля 2017, 16:38

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

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

Answer 1

Воспользовался сервисом 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>