Testing 3D text in CSS

Developer
Hawcubite
Size
5,079 Kb
Views
12,144
  1. Testing 3D text in CSS Previews
  2. Testing 3D text in CSS HTML Codes
  3. Testing 3D text in CSS CSS Codes
  4. Testing 3D text in CSS JS Codes

How do I make an testing 3d text in css?

What is a testing 3d text in css? How do you make a testing 3d text in css? This script and codes were developed by Hawcubite on 14 December 2022, Wednesday.

Testing 3D text in CSS Previews
IQ Test

Testing 3D text in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Testing 3D text in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="canvas"> <div id="words" class="words"> <div class="word word-die"> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-i"> <div class="pixel x4 y4"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y5"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> </div> <div class="pixel x4 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x4 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> </div> <div class="letter letter-e"> <div class="pixel x5 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y6"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y5"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y5"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y5"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x3 y8"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y7"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x3 y7"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> </div> </div> <div class="word word-die"> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> </div> <div class="word word-die"> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> <div class="letter letter-d"> <div class="pixel x5 y0"> <div class="flip flip-right"></div> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y1"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x4 y2"> <div class="flip flip-down-left"></div> <div class="flip flip-left"></div> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> </div> <div class="pixel x5 y1"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y2"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y3"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y4"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y5"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y6"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y7"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y8"> <div class="flip flip-back"></div> <div class="flip flip-front"></div> <div class="flip flip-right"></div> <div class="flip flip-left"></div> </div> <div class="pixel x5 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x4 y8"> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> <div class="flip flip-down-left"></div> </div> <div class="pixel x2 y9"> <div class="flip flip-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x3 y9"> <div class="flip flip-top"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y9"> <div class="flip flip-front clip-top-left"></div> <div class="flip flip-back clip-top-left"></div> <div class="flip flip-down-left"></div> <div class="flip flip-right"></div> </div> <div class="pixel x2 y8"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x2 y7"> <div class="flip flip-left"></div> <div class="flip flip-right"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x1 y7"> <div class="flip flip-right"></div> </div> <div class="pixel x2 y6"> <div class="flip flip-down-left"></div> <div class="flip flip-front clip-bottom-right"></div> <div class="flip flip-back clip-bottom-right"></div> </div> <div class="pixel x3 y6"> <div class="flip flip-bottom"></div> <div class="flip flip-top"></div> <div class="flip flip-front"></div> <div class="flip flip-back"></div> </div> <div class="pixel x4 y6"> <div class="flip flip-up-left"></div> <div class="flip flip-bottom"></div> <div class="flip flip-front clip-bottom-left"></div> <div class="flip flip-back clip-bottom-left"></div> </div> </div> </div>
</div>
</div>
<svg class="clip-svg"> <defs> <clipPath id="clip-polygon-top-left" clipPathUnits="objectBoundingBox" > <polygon points="0 1, 0 0, 1 0, 0 1" /> </clipPath> <clipPath id="clip-polygon-bottom-right" clipPathUnits="objectBoundingBox" > <polygon points="0 1, 1 1, 1 0, 0 1" /> </clipPath> <clipPath id="clip-polygon-top-right" clipPathUnits="objectBoundingBox" > <polygon points="1 0, 1 1, 0 0, 1 0" /> </clipPath> <clipPath id="clip-polygon-bottom-left" clipPathUnits="objectBoundingBox" > <polygon points="0 1, 0 0, 1 1, 0 1" /> </clipPath> </defs>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Testing 3D text in CSS - Script Codes CSS Codes

html { font-size: 10px;
}
.canvas { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; //transform: rotate3d(1, 0, 0, 20deg); transform-style: preserve-3d; overflow: hidden;
}
.words { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotate3d(1, 1, 0, 30deg) scale(.5); /* debug */
}
body:hover .words { transition: transform .15s;
}
.word { position: absolute; width: 100%; height: 100%; perspective: 10000px; transform-style: preserve-3d;
}
.letter { display: inline-block; position: absolute; height: 100%; width: 100%; transform-style: preserve-3d; /background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAF0lEQVQYlWNgYGBIIxJDCGLAqELKFQIA3MgHk6QmDW0AAAAASUVORK5CYII=") repeat scroll; background-size: 10% 10%; transition: 1.5s transform .05s;
}
.pixel { position: absolute; height: 10%; width: 10%; transform-style: preserve-3d; transform-origin: right center; transform: rotate3d(0, -1, 0, 90deg) translateX(100%);
}
.y0 { top: 0; }
.y1 { top: 10%; }
.y2 { top: 20%; }
.y3 { top: 30%; }
.y4 { top: 40%; }
.y5 { top: 50%; }
.y6 { top: 60%; }
.y7 { top: 70%; }
.y8 { top: 80%; }
.y9 { top: 90%; }
.x0 { left: 0; }
.x1 { left: 10%; }
.x2 { left: 20%; }
.x3 { left: 30%; }
.x4 { left: 40%; }
.x5 { left: 50%; }
.x6 { left: 60%; }
.x7 { left: 70%; }
.x8 { left: 80%; }
.x9 { left: 90%; }
.flip { position: absolute; height: 100%; width: 100%; background: #A2005F; transition: 1.5s background .05s; transform-style: preserve-3d; border-radius: 3px; /* Ecken leicht glätten */
}
.hover .flip { background: #580688;
}
.letter.hover { transform: scale(1.3) rotate(10deg) translateZ(100px);
}
.flip-down-left { transform-origin: top;
}
.flip-up-left { transform-origin: top;
}
.flip-bottom { transform: rotate3d(-1, 0, 0, -90deg); transform-origin: top left;
}
.flip-top { transform: translateY(-100%) translateX(100%) rotateZ(90deg) rotateX(180deg) rotateY(90deg); transform-origin: bottom left;
}
.flip-back { transform: rotate3d(0, 1, 0, 90deg) translateX(-100%); transform-origin: bottom left; /background: red;
}
.flip-front { transform: rotate3d(0, 1, 0, 90deg); transform-origin: right bottom;
}
.flip-left { transform: rotateY(-90deg) translateX(100%) rotateY(90deg);
}
/* Clipping for half pixels */
.clip-top-left { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 0% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 0% 100%); /* overwritten because not supported by firefox */ -webkit-clip-path: url("#clip-polygon-top-left"); clip-path: url("#clip-polygon-top-left");
}
.clip-bottom-right { -webkit-clip-path: polygon(0 100%, 1 1, 100% 0, 0% 100%); clip-path: polygon(0 100%, 1 1, 100% 0, 0% 100%); /* overwritten because not supported by firefox */ -webkit-clip-path: url("#clip-polygon-bottom-right"); clip-path: url("#clip-polygon-bottom-right");
}
.clip-top-right { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 0% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 0% 100%); /* overwritten because not supported by firefox */ -webkit-clip-path: url("#clip-polygon-top-right"); clip-path: url("#clip-polygon-top-right");
}
.clip-bottom-left { -webkit-clip-path: polygon(0 100%, 1 1, 100% 0, 0% 100%); clip-path: polygon(0 100%, 1 1, 100% 0, 0% 100%); /* overwritten because not supported by firefox */ -webkit-clip-path: url("#clip-polygon-bottom-left"); clip-path: url("#clip-polygon-bottom-left");
}

Testing 3D text in CSS - Script Codes JS Codes

/* There's no way to access height AND width for CSS transformations, so we have to fix it per javascript. CSS variables would help, but are badly supported by modern browsers. */
var scaling = 2;
var canvas = $(".canvas");
var canvasHeight = $(".canvas").height();
var canvasWidth = $(".canvas").width();
function rotateDiagonals(elem, returnValue) { var height = canvas.height() / 10; var width = canvas.width() / 10; var angle = Math.atan2(width,height) * 100; var length = Math.sqrt((height*height)+(width*width)); angle = 180/Math.PI*Math.acos((height*height-(-length*length)-width*width)/(2*height*length)),4; length = Math.round(length * 100) / 100; switch(returnValue) { case "angle": return angle; case "length": return length; case "width": return width; }
}
function transformFlips() { $(".flip-down-left, .flip-up-left").each(function() { var $this = $(this); var angle = rotateDiagonals(this, "angle"); var length = rotateDiagonals(this, "length"); var width = rotateDiagonals(this, "width"); if($this.is(".flip-down-left")) { $this.css({ transform: "rotate3d( -1, 0, 0, -" + angle + "deg)", height: length + "px"}); } else if($this.is(".flip-up-left")) { $this.css({ transform: "translateZ(" + width + "px) rotate3d( 1, 0, 0, -" + angle + "deg)", height: length + "px"}); } });
}
function transformBottomTop(canvasHeight,canvasWidth) { $(".flip-top").each(function() { $(this).height(canvasWidth / 10); }); $(".flip-bottom").each(function() { var $this = $(this); var width = canvasWidth / 10; var height = canvasHeight / 10; $this.height(width); $this.css({ transform: "rotate3d(-1, 0, 0, 90deg) translateZ(" + height + "px) translateY(-" + width + "px)" }); });
}
function scaleWidth(canvasWidth) { $(".word").each(function() { var $this = $(this); /* set scale by number of letters (only one word supported) */ var letters = $this.children(".letter").length; scaling = 1 / letters; /* position letters next to each other */ var moveX = ((canvasWidth / 2) * (letters/2) - (canvasWidth / 4)) * -1; $this.children(".letter").each(function() { $(this).css({ left: moveX }); moveX = moveX + (canvasWidth / 2); }); });
}
function scaleHeight(canvasHeight) { var $words = $(".word"); var moveY = ((canvasHeight / 2) * ($words.length/2) - (canvasHeight/4)) * -1; $words.each(function() { $(this).css({ top: moveY, transform: "translateY(" + ((canvasHeight / 2) * -1) + "px)" }); moveY = moveY + (canvasHeight); });
}
/* Mouseover effect disabled
$(".letter .pixel").mouseover(function() { $(this).parents(".words").find(".letter").addClass("hover");
}).mouseout(function() { $(this).parents(".words").find(".letter").removeClass("hover");
});
*/
$(window).ready(function() { canvasHeight = canvas.height(); canvasWidth = canvas.width(); scaleWidth(canvasWidth); scaleHeight(canvasHeight); transformFlips(); transformBottomTop(canvasHeight,canvasWidth); rotate ({});
}).resize(function() { canvasHeight = canvas.height(); canvasWidth = canvas.width(); scaleWidth(canvasWidth); scaleHeight(canvasHeight); transformFlips(); transformBottomTop(canvasHeight,canvasWidth);
});
function rotate (event) { var w = window.innerWidth; var h = window.innerHeight; var midpointW = w / 2; var midpointH = h / 2; var x = event.clientX || midpointW; var y = event.clientY || midpointH; var posX = x - midpointW; var posY = y - midpointH;	var valX = (posX / midpointW) * 40;	var valY = (posY / midpointH) * 40;	var words = document.getElementById("words");	words.style.transform = "perspective(10000px) scale(" + scaling + ") rotateY(" + valX + "deg) rotateX(" + valY + "deg)";
}
if (window.PointerEvent) { document.addEventListener("pointermove", function (event) { rotate (event) }, false);
} else { document.addEventListener("mousemove", function (event) { rotate (event) }, false);
}
Testing 3D text in CSS - Script Codes
Testing 3D text in CSS - Script Codes
Home Page Home
Developer Hawcubite
Username hawcubite
Uploaded December 14, 2022
Rating 3
Size 5,079 Kb
Views 12,144
Do you need developer help for Testing 3D text in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hawcubite (hawcubite) Script Codes
Name
Color Picker Cube
Table scroll shadows
DFF Website
Organic responsive rounded container
Radial Image Preview
LastFM Scrobbling Notifications
Gooey cube
A Pen by hawcubite
Transitional Hover-Boxes
Vue.js Tutorial
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!