feat: smartin3.de — full 360 rotation from diagonal angle, more depth
This commit is contained in:
@@ -123,18 +123,18 @@
|
||||
-webkit-text-stroke: 1px rgba(249, 115, 22, 0.3);
|
||||
}
|
||||
|
||||
.text3d-depth:nth-child(2) { transform: translateZ(-2px); }
|
||||
.text3d-depth:nth-child(3) { transform: translateZ(-4px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.25); }
|
||||
.text3d-depth:nth-child(4) { transform: translateZ(-6px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.2); }
|
||||
.text3d-depth:nth-child(5) { transform: translateZ(-8px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.15); }
|
||||
.text3d-depth:nth-child(6) { transform: translateZ(-10px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.1); }
|
||||
.text3d-depth:nth-child(7) { transform: translateZ(-12px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.06); }
|
||||
.text3d-depth:nth-child(8) { transform: translateZ(-14px); -webkit-text-stroke-color: rgba(56, 189, 248, 0.15); }
|
||||
.text3d-depth:nth-child(9) { transform: translateZ(-16px); -webkit-text-stroke-color: rgba(56, 189, 248, 0.1); }
|
||||
.text3d-depth:nth-child(2) { transform: translateZ(-4px); }
|
||||
.text3d-depth:nth-child(3) { transform: translateZ(-8px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.25); }
|
||||
.text3d-depth:nth-child(4) { transform: translateZ(-12px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.2); }
|
||||
.text3d-depth:nth-child(5) { transform: translateZ(-16px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.15); }
|
||||
.text3d-depth:nth-child(6) { transform: translateZ(-20px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.1); }
|
||||
.text3d-depth:nth-child(7) { transform: translateZ(-24px); -webkit-text-stroke-color: rgba(249, 115, 22, 0.06); }
|
||||
.text3d-depth:nth-child(8) { transform: translateZ(-28px); -webkit-text-stroke-color: rgba(56, 189, 248, 0.15); }
|
||||
.text3d-depth:nth-child(9) { transform: translateZ(-32px); -webkit-text-stroke-color: rgba(56, 189, 248, 0.1); }
|
||||
|
||||
@keyframes rotateText {
|
||||
0%, 100% { transform: rotateY(-15deg) rotateX(5deg); }
|
||||
50% { transform: rotateY(15deg) rotateX(-5deg); }
|
||||
0% { transform: rotateX(-25deg) rotateY(0deg); }
|
||||
100% { transform: rotateX(-25deg) rotateY(360deg); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
Reference in New Issue
Block a user