Ztext는 HTML 요소에서 레이어를 생성하여 볼륨의 환상을 제공합니다. 

<canvas>를 만지작 거리거나 사용자가 멀티 메가 바이트 WebGL 라이브러리를 다운로드하도록 강요 할 필요가 없습니다. ztext를 사용하면 콘텐츠를 완전히 선택하고 액세스 할 수 있습니다.

https://bennettfeely.com/ztext/

https://github.com/bennettfeely/bennett/tree/master/ztext

사용자의 96 % 이상이 ztext가 작동하는 데 필요한 CSS 변환 스타일 속성을 지원하는 웹 브라우저를 사용합니다. 지원되지 않는 브라우저에서는 ztext가 정상적으로 꺼집니다.

<script src="/path/to/ztext.min.js"></script>

<h1>
   <span data-z data-z-layers="3" data-z-depth="0.5em">A</span>
</h1>

이 방법을 사용하면 ztext는 data-z 또는 data-z = "true"속성이 있는 HTML 요소를 찾고 여기에 3D 효과를 적용합니다.

이 CSS 스니펫으로 시작하고 원하는 방식으로 ztext 스타일을 지정하십시오. Ztext는 웹에서 작동하는 모든 글꼴에서 작동합니다. 또한 CSS 애니메이션 및 전환과 쉽게 통합 할 수 있습니다.

h1 {
   font: bold 5em "Georgia", serif;
   color: #90a4ae;
}

.z-text {
   /* Tip: Apply CSS transforms here */
   /* rotateX() == up/down */
   /* rotateY() == left/right */
   transform: rotateX(15deg) rotateY(-30deg);
}

.z-layer:not(:first-child) {
   color: #455a64;
}

Ztext는 텍스트만을 위한 것이 아닙니다. SVG, 그림 이모티콘 및 이미지에 3 차원을 추가합니다.