HTML | Using CSS for animation

|
| By 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

Leave a Reply

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