3D Letter Animation with Customization

3D Letter Animation with Customization

Font Size (px) 50 75 100 150 200 Font Color Red Green Yellow Purple Orange Teal Dark Blue Violet Crimson Pumpkin Light Blue Emerald Sunflower Courier New Georgia Verdana Times New Roman Comic Sans MS Impact Trebuchet MS Lucida Console Palatino Linotype Text Alignment Left Right Center 3D Style 1 3D Style 2 3D Style 3 3D Style 4 3D Style 5 3D Style 6 Animation Type Bounce Down Fade In Fade Out Line Up/Down Rotate Left Rotate Right Side Up Shake Zoom In Zoom Out Pulse Flip Roll Slide In Left Slide In Right Animation Speed (s) 1 2 3 4 5 6

HTML and CSS Code:

<div class="text-3d">Your Text Here</div>

<style>
.text-3d {
    font-size: 100px; /* Change as needed */
    color: #3498db; /* Change as needed */
    position: relative;
    animation: rotate 4s infinite linear;
}
@keyframes rotate {
    0% {
        transform: perspective(500px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(500px) rotateX(15deg) rotateY(15deg);
    }
    100% {
        transform: perspective(500px) rotateX(0deg) rotateY(0deg);
    }
}
</style>