Трёхмерный мир на чистом CSS

Трёхмерный мир на чистом CSS

Трёхмерный мир на чистом CSS

Здравствуйте! В сегодняшней статье мы посмотрим вам, как создать 3D-мир от первого лица с возможностью просмотра с помощью чистого CSS! Абсолютно никакого JavaScript!

Прежде всего нам нужно создать наши стены и пол, чтобы создать нашу 3D-комнату. Мы также создадим сцену, которая будет содержать весь наш 3D-мир.

Далее нам нужно добавить несколько стилей для нашей сцены.

Нам нужно использовать стиль трансформации, чтобы убедиться, что все узлы внутри сцены правильно трансформируются в 3D-пространстве.



<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

.scene {

   position: relative;

   transform-style: preserve-3d;



}



body {

   background-color: #000;

   min-height: 100vh;

   display: flex;

   justify-content: center;

   align-items: center;

   font-size: 40px;

   perspective: 10em;

   perspective-origin: 50% calc(50% - 2em);

   overflow: hidden;

}



.frontWall, .leftWall, .rightwall  {

   position: absolute;

   background-color: #222297;

   background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #222297 1em ), repeating-linear-gradient( #03076055, #030760 );

   width: 20em;

   height: 20em;

   top: -16em;

   left:-10em;

   transform: translateZ(-10em);

  }

  .leftWall {

   left:-20em;

   transform: rotateY(-90deg);

}

.rightWall {

   transform: rotateY(90deg);

   left:0;

 }

 .floor {

   background-color: #000;

   background-image:  linear-gradient(135deg, #ffffff 25%, transparent 25%), linear-gradient(225deg, #ffffff 25%, transparent 25%), linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(315deg, #ffffff 25%, #000 25%);

   background-position:  1em 0, 1em 0, 0 0, 0 0;

   background-size: 1em 1em;

   background-repeat: repeat;

   width: 20em;

   height: 20em;

   top: 1em;

   z-index: 0;

   position: absolute;

   transform:

     translate(-50%, -50%)

     rotateX(90deg)

     translateZ(-3em);

}

</style>

</head>



<body>



<div class="scene">

   <div class="frontWall"></div>

   <div class="leftWall"></div>

   <div class="rightWall"></div>

   <div class="floor"></div>

</div>





</body>

</html>



Результат:

Трёхмерный мир на чистом CSS

Таким образом, мы создали 3D сцену с помощью чистого CSS, к которому в дальнейшем мы можем добавить дополнительные свойства.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий