Как создать трехмерный кубоид с градиентным цветом в нем с помощью CSS - PullRequest
Новая
       61

Как создать трехмерный кубоид с градиентным цветом в нем с помощью CSS

0 голосов
/ 09 июня 2018

У меня есть базовые знания в HTML, CSS.Я хочу создать HTML-страницу с этими 3-мя трехмерными кубоидами, подобными этому

enter image description here 3D-кубоид на изображении выше выглядит мне сложным.Так что кто-нибудь может предложить, как создать этот трехмерный кубоид с HTML и CSS

Чтобы создать первый кубоид, я попробовал это: 

<div class="box1">
      <div>step 1</div>
      <div>Your Title</div>
      <div></div>                                                
</div>

Я добавил 3 div внутри main divкоторые представляют лица кубов.Ниже приведено css: 

.box1 {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#000;
  text-align:center;
  font-family:arial;
}
.box1 > div:first-child{
  width:30%;
  background:linear-gradient(to right,#008ec2b0,#085c6d);
  transform: rotateY(-30deg);
    transform-origin: right;
}
.box1 > div:last-child {
  width:60%;
  background:linear-gradient(to right,,#15a5c4,#4dca75);
  transform: rotateY(-30deg);
  transform-origin: right;
}

.box1 > div:not(:first-child):not(:last-child) {
  width:60%;
  background:linear-gradient(to right,#008ec2b0,#085c6d);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(180deg);
}

Но невозможно выровнять дно кубоида

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Вы можете поиграть с перспективой и трансформацией для создания таких фигур.

Вот пример для второй рамки: 

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg);
}
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>

Для первого и третьего вы можете рассмотреть возможность использования псевдоэлемента для получения третьей грани и добавления некоторого преобразования skew для получения идеальной формы.

Вот пример для третьего поля 

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  position:relative;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg) skewY(9deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg) skewY(-9deg);
}

.box:before {
    content: "";
    position: absolute;
    top: -27px;
    width: 41%;
    left: 50px;
    height: 16px;
    background: linear-gradient(to right,orange,#e53800);
    transform: rotate(4.6deg) skewX(-80deg);
    transform-origin: left bottom;
}
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>

Вот пример для первого 

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  position:relative;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg) skewY(-9deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg) skewY(9deg);
}

.box:before {
        content: "";
    position: absolute;
    top: 91px;
    width: 29%;
    left: 50px;
    height: 22px;
    background: linear-gradient(to right,orange,#e53800);
    transform: rotate(4.6deg) skewX(-80deg);
    transform-origin: left bottom;
}
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>
0 голосов
/ 09 июня 2018

Здравствуйте, я только что сделал небольшой пример, чтобы вы знали, как играть с перспективой в HTML CSS.

https://jsfiddle.net/ty820kbh/1

Вы можете изменить ширину и высоту каждой грани вCSS (оставайтесь последовательными) и добавьте желаемый стиль, затем вы можете изменить перспективу .wrapper, чтобы отобразить кубоид в желаемом виде.

...