4

Я пытаюсь создать CSS-тетраэдр, поэтому я решаю эту проблему, выполнив несколько CSS3-треугольников и активировав трехмерные трансформации с помощью свойства perspective.

Но у меня есть некоторые проблемы, чтобы понять все трансформации, вот часть моего кода

.navbar-brand-logo {
  width: 64px;
  height: 64px;
  transform-style: preserve-3d;
  perspective: 600px;
  position: relative;
}
.face {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 64px 32px 0 32px;
  transform-origin: 0 0;
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
  transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
  transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
  transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
  border-width: 64px 0 0px 4px;
  transform: scaleX(128px) translateZ(0px);
}
<section class="navbar-brand-logo">
  <figure class="face logo-base-left"></figure>
  <figure class="face logo-base-right"></figure>
  <figure class="face logo-up"></figure>
  <figure class="face logo-down-up"></figure>
</section>

У меня есть проблемы, чтобы представить, как я могу сделать две других грани (слева вверху и справа)

Вот CodePen , который иллюстрирует текущую попытку:

Кроме того, это хорошая идея использовать тетраэдр CSS3 в качестве логотипа? Или бы лучше, если бы это был SVG?

Свободный перевод вопроса How to make a tetrahedron? от участника @Raito.

1

1 ответ 1

4

Вот несколько шагов, описывающих подход к созданию адаптивного тетраэдра: demo - responsive tetrahedron .

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

Шаг 1. грани

Тетраэдр имеет 4 треугольных грани. Каждая грань представляет собой равносторонний треугольник. В следующем примере я использовал свойство clip-path, чтобы сделать 4 равносторонних треугольника:

.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;
}

.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg);
  background:pink;
}
<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

Шаг 2. сделать это 3d

для этого вам нужно повернуть каждую грань отдельно в 3d среде с perspective и в transform-style:

body{
  perspective:9000px;
}
.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;  
  transform-style:preserve-3d;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;  
  transform-style:preserve-3d;
}

.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg) rotatex(-109.5deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg) rotatex(-109.5deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg) rotatex(-109.5deg);
  background:pink;
}
<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

На данный момент у вас есть тетраэдр, но вы можете видеть только 3 грани, чтобы увидеть всю трехмерную фигуру:

Шаг 3. заставить его вращаться!

Сверху вы увидите весь тетраэдр, вам нужно повернуть его с анимацией transition или keyframe animation:

body{
  perspective:9000px;
  padding-top:10%;
}
.tetra{
  position:relative;
  width:20%; 
  padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
  margin:0 auto;  
  transform-style:preserve-3d;  
  transform:rotatex(90deg) rotateY(0deg) rotatez(0deg);
  animation: rotate 10s linear infinite;
}

.tetra div{
  position:absolute;
  top:0;left:0;
  width:100%; height:100%;
  -webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  clip-path:polygon(50% 0, 100% 100%, 0% 100%);
  background:teal;  
  transform-style:preserve-3d;
}

.tetra .face2{
  transform-origin:0% 100%;
  transform:rotate(-60deg) rotatex(-109.5deg);
  background:gold;
}
.tetra .face3{
  transform-origin:100% 100%;
  transform:rotate(60deg) rotatex(-109.5deg);
  background:darkorange;
}
.tetra .face4{
  transform-origin:50% 100%;
  transform:rotate(180deg) rotatex(-109.5deg);
  background:pink;
}
@keyframes rotate{
  50%{transform:rotatex(100deg) rotateY(10deg) rotatez(180deg);}
  100%{transform:rotatex(90deg) rotateY(0deg) rotatez(360deg);}
}
<div class="tetra">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
  <div class="face4"></div>
</div>

Свободный перевод ответа How to make a tetrahedron? от участника @web-tiki.

Ваш ответ

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

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