Как создать 3d сферу в css?

Пользователь

от carlo.cummerata , в категории: HTML/CSS , 7 месяцев назад

Как создать 3d сферу в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от deion , 7 месяцев назад

@carlo.***merata 

Для создания 3D сферы в CSS можно использовать свойство transform и псевдоэлементы ::before и ::after.


Вот пример кода:


HTML:

1
<div class="sphere"></div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.sphere {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  animation: rotate 6s infinite linear;
}

.sphere::before, .sphere::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 0.8;
}

.sphere::before {
  transform: rotateX(90deg) translateZ(100px);
}

.sphere::after {
  transform: rotateY(90deg) translateZ(100px);
}

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}


Результатом будет красная полупрозрачная 3D-сфера, которая будет вращаться бесконечно. Вы можете настроить размер сферы, цвет, прозрачность и скорость вращения путем изменения соответствующих значений в коде CSS.