HTML | Using CSS for animation

Author - Webner

With recent evolution in CSS, we can try animations. Below is a sample code where in which have used latest CSS features and will give the illusion of animation. Just copy paste the code below in an HTM file and and view it in browser.

Code:

<html>
<head>
<style>
.wrapper {
    perspective: 800px;
    perspective-origin: 50% 100px;
    margin-left: 40%;
    margin-top: 10%;
}
.magic-rohan {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
}
.back {
    transform: translateZ(-100px) rotateY(180deg);
}
.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}

.front {
    transform: translateZ(100px);
}
@keyframes spin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}

.magic-rohan {
    animation: spin 5s infinite linear;
}


.magic-rohan div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    font-size: 20px;
    text-align: center;
    line-height: 200px;
    color: rgba(0,0,0,0.5);
    font-family: sans-serif;
    text-transform: uppercase;
}


</style>
</head>
<body>
<div class="wrapper">
    <div class="magic-rohan">
        <div class="front">FRONT</div>
        <div class="back">BACK</div>
        <div class="top">TOP</div>
        <div class="bottom">BOTTOM</div>
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
    </div>
</div>
</body>

</html>

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *