CSS 3D 축

CSS에서의 3D 축은 다음과 같다.

 

3D 축을 HTML, CSS를 이용하여 다음과 같이 만들 수 있다.

<div class="container">
  <div class="x-axis">
    <span class="text">x</span>
  </div>
  <div class="y-axis">
    <span class="text">y</span>
  </div>
  <div class="z-axis">
    <span class="text">z</span>
  </div>
</div>

 

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #000;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 500px;
  height: 500px;
  margin: auto;
  perspective: 600px;
  perspective-origin: top right;
}

.x-axis {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  background-color: #2ed573;
}

.x-axis::before, .x-axis::after {
  content: '';
  position: absolute;
  top: -14px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}

.x-axis::before {
  left: -2px;
  border-right: 16px solid #2ed573;
}

.x-axis::after {
  right: -2px;
  border-left: 16px solid #2ed573;
}

.y-axis, .z-axis {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-top: -2px;
  background-color: #2ed573;
}

.y-axis::before, .y-axis::after, .z-axis::before, .z-axis::after {
  content: '';
  position: absolute;
  left: -14px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
}

.y-axis::before, .z-axis::before  {
  top: -2px;
  border-bottom: 16px solid #2ed573;
}

.y-axis::after, .z-axis::after {
  bottom: -2px;
  border-top: 16px solid #2ed573;
}

.z-axis {
  transform: rotateX(90deg);
}

.text {
  display: inline-block;
  position: relative;
  top: 10px;
  left: 20px;
  font-size: 40px;
  color: #fff;
}

 

.container 클래스에 perspective, perspective-origin 속성을 설정하여 3D 처럼 보이도록 설정하였으며

z축은 y축을 x축 기준으로 90도 회전시켜서 만들었다.

codepen.io/hwanlee/pen/OJWdxvB

 

 

참고

- developpaper.com/from-css-3d-to-coordinate-axis-with-source-code/

From CSS 3D to coordinate axis with source code - Develop Paper