3D Text Effect

CSS text-shadow를 활용하여 3D 텍스트 효과를 구현합니다. 회전, 기울기, 다층 그림자를 통해 입체감 있는 텍스트를 표현하며, 게임이나 레트로 스타일의 인터페이스에 적합합니다.

3D TEXT

컨트롤 패널

표시할 텍스트

글꼴 크기 (px)

회전 각도 (도)

기울기 각도 (도)

기본 텍스트 색상

첫 번째 그림자 색상

두 번째 그림자 색상

세 번째 그림자 색상

배경 색상

그림자 깊이

그림자 X 오프셋

그림자 Y 오프셋

그림자 블러

그림자 확산

배경 스타일 적용

1

인터렉션 아이디어

언제:3D 텍스트 효과가 필요한 게임이나 레트로 스타일 인터페이스에서
무엇을:텍스트를
어떻게:CSS text-shadow의 다층 그림자와 transform의 rotate, skew를 조합하여 입체감 있는 3D 효과로 표현
2

바이브 프롬프트

Text3D 컴포넌트를 만들어주세요. 이 컴포넌트는 CSS text-shadow를 활용한 3D 텍스트 효과를 보여줍니다. text prop으로 표시할 텍스트를, fontSize prop으로 글꼴 크기를, rotateAngle과 skewAngle prop으로 회전과 기울기 각도를 설정할 수 있게 해주세요. baseColor prop으로 기본 텍스트 색상을, shadowColor1, shadowColor2, shadowColor3 prop으로 다층 그림자 색상을, backgroundColor prop으로 배경 색상을 설정할 수 있게 해주세요. shadowDepth prop으로 그림자 깊이를, shadowOffsetX와 shadowOffsetY prop으로 그림자 오프셋을, shadowBlur와 shadowSpread prop으로 그림자 블러와 확산을 설정할 수 있게 해주세요. centered prop으로 배경 색상 적용 여부를 설정할 수 있게 해주세요. CSS text-shadow를 다층으로 생성하여 3D 효과를 구현하고, transform을 활용하여 회전과 기울기 효과를 적용해주세요.