БЛОГ НА HUSL


Как создать куб только с HTML и CSS?

Автор вопроса: Alexandr_TT

введите сюда описание изображения

У меня есть этот код, и я хочу сделать куб с HTML и CSS, только как на картинке выше 

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,180deg);
  position: absolute;
  left: 51px;
  top: -61px;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

Какие изменения, дополнения нужно внести в код?

Свободный перевод вопроса How to create cube with only HTML and CSS? от участника @Sunil Gehlot.


Источник

Ответы (3 шт):

Автор решения: Alexandr_TT

Вы также можете получить куб с 3D-transforms.
Это даст вашему кубу более реалистичную перспективу.
Как будто куб был настоящей трехмерной формой, подобной этой:

введите сюда описание изображения

Далее я использовал один div с 2 псевдо элементами: 

body {
  perspective: 900px;
  padding-bottom:50%;
}
div {
  position: relative;
  width: 20%;
  padding-bottom: 20%;
  margin: 0 auto;
  transform-style: preserve-3d;
  background: #C52329;
  transform: rotateX(60deg) rotatez(45deg);
}
div:before, div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: -2% -2%;
  background: inherit;
}
div:before {
  top: 104%; left: 0;
  transform: rotateX(-90deg);
}
div:after {
  top: 0; left: 104%;
  transform: rotateY(90deg);
}
<div></div>

CSS 3d куб с 6 гранями

Эта техника позволяет создать «настоящий куб» с 6 гранями, который можно вращать: 

body{
  perspective-origin:50% -100%;
  perspective: 900px;
  overflow:hidden;
}
h1{position:absolute;font-family:sans-serif;}
.cube {
  position:relative;
  padding-bottom:20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform:rotateY(45deg) rotateX(0);
  transition:transform 3s;
}
.cubeFace {
  position: absolute;
  left:40%;top:0;
  width: 20%;height:100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow:inset 0 0 0 5px #fff; 
  transform-origin:50% 50%;
  transform: rotateX(90deg);
  backface-visibility:hidden;
}
.face2{
  transform-origin:50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin:0 0;
  background: inherit;
  box-shadow:inherit;
  backface-visibility:inherit;
}
.cubeFace:before {
  top: 100%; left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0; left: 100%;
  transform: rotateY(90deg);
}

body:hover .cube{
  transform:rotateY(405deg) rotateX(360deg);
}
<h1>Hover me:</h1>
<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

Обратите внимание, что я не добавил префиксы поставщиков в примерах. Для получения дополнительной информации о поддержке браузера и о том, какие префиксы вендоров необходимы для вашей целевой аудитории, см. canIuse for 3d transforms.

Свободный перевод ответа How to create cube with only HTML and CSS? от участника @web-tiki.

→ Ссылка
Автор решения: Sevastopol'

А если потребуется грани куба, например, пронумеровать, то здесь уже псевдоэлементы :before и :after не помогут :)

.container {
  perspective: 500px;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 25px auto;
}

.cube {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: animate 7s linear infinite;
}

.cube span {
  backface-visibility: hidden;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #ffffff;
  background-color: #c62329;
  color: #ffffff;
  line-height: 150px;
  text-align: center;
  font-size: 80px;
  font-weight: bold;
}

.cube .front {transform: rotateY(0deg) translateZ(75px);}
.cube .back {transform: rotateX(180deg) translateZ(75px);}
.cube .top {transform: rotateX(90deg) translateZ(75px);}
.cube .bottom {transform: rotateX(-90deg) translateZ(75px);}
.cube .left {transform: rotateY(-90deg) translateZ(75px);}
.cube .right {transform: rotateY(90deg) translateZ(75px);}

@keyframes animate {
0% {transform: translateZ(-150px) rotateY(360deg) rotateZ(0deg) rotateX(45deg)}
50% {transform: translateZ(-150px) rotateY(180deg) rotateZ(180deg) rotateX(45deg)}
100% {transform: translateZ(-150px) rotateY(0deg) rotateZ(360deg) rotateX(45deg)}
}
<div class="container">
  <div class="cube"><span class="front">1</span><span class="back">2</span><span class="top">3</span><span class="bottom">4</span><span class="left">5</span><span class="right">6</span></div>
</div>

Кто-нибудь сможет дополнительно дать ответ, чтобы вращение куба зависело от перемещений курсора. Допустим перемещаем курсор вверх-вниз куб вращается вокруг оси Y. в разные стороны. При перемещении влево-вправо курсора куб вращается вокруг оси X

Да, пожалуйста. Но здесь уже одним только HTML и CSS, думаю, не обойтись. Нужно добавить чуть-чуть JavaScript.

var cube = document.getElementById("cube");
document.onmousemove = function(){
var x = event.clientX,
y = event.clientY;
cube.style.transform = "rotateY(" + x + "deg)" + "rotateX(" + y + "deg)";
}
.container {
  perspective: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  width: 150px;
  height: 150px;
}

.cube {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
}

.cube span {
  backface-visibility: hidden;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #ffffff;
  background-color: #c62329;
  color: #ffffff;
  line-height: 150px;
  text-align: center;
  font-size: 80px;
  font-weight: bold;
}

.cube .front {transform: rotateY(0deg) translateZ(75px);}
.cube .back {transform: rotateX(180deg) translateZ(75px);}
.cube .top {transform: rotateX(90deg) translateZ(75px);}
.cube .bottom {transform: rotateX(-90deg) translateZ(75px);}
.cube .left {transform: rotateY(-90deg) translateZ(75px);}
.cube .right {transform: rotateY(90deg) translateZ(75px);}
<div class="container">
  <div id="cube" class="cube"><span class="front">1</span><span class="back">2</span><span class="top">3</span><span class="bottom">4</span><span class="left">5</span><span class="right">6</span></div>
</div>

→ Ссылка
Автор решения: Alexandr_TT

Согласно вашему HTML, я получаю этот JSFiddle Я только что играл с transform.

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
 

transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

Updated CSS

.square3{
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}

Я изменил преобразование CSS с этим:

Дополнительно: у David Walsh есть крутая анимированная версия на кубе. Помимо того, что это выглядит довольно круто, поиграв с настройками, вы можете многое узнать об этом.

Свободный перевод ответа How to create cube with only HTML and CSS? от участника @Leo the lion.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.