Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Rotate In Up Left Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate in up left animation effect creates a smooth rotational transition where an element rotates from its normal position to -90 degrees around the left bottom corner while fading out. This animation is commonly used for exit effects and interactive elements.

Syntax

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
}

.element {
    animation: rotateInUpLeft duration timing-function;
}

Example

The following example demonstrates a rotate in up left animation effect applied to a colored box −

<!DOCTYPE html>
<html>
<head>
<style>
    .animated-box {
        width: 150px;
        height: 150px;
        background-color: #3498db;
        margin: 50px auto;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        font-weight: bold;
        animation: rotateInUpLeft 2s ease-in-out infinite;
    }

    @keyframes rotateInUpLeft {
        0% {
            transform-origin: left bottom;
            transform: rotate(0deg);
            opacity: 1;
        }
        100% {
            transform-origin: left bottom;
            transform: rotate(-90deg);
            opacity: 0;
        }
    }

    .container {
        padding: 20px;
        text-align: center;
    }

    button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #2ecc71;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="animated-box">Rotate!</div>
        <button onclick="location.reload()">Restart Animation</button>
    </div>
</body>
</html>

A blue box with "Rotate!" text appears and continuously rotates 90 degrees counterclockwise around its left-bottom corner while fading out, then reappears and repeats the animation. A green "Restart Animation" button is displayed below.

Key Properties

Property Value Description
transform-origin left bottom Sets the pivot point for rotation at the left-bottom corner
transform rotate(-90deg) Rotates element 90 degrees counterclockwise
opacity 0 to 1 Controls visibility during the animation

Conclusion

The rotate in up left animation creates an engaging exit effect by combining rotation and opacity changes. The transform-origin property is crucial for controlling the rotation pivot point, making the animation appear to rotate around the left-bottom corner.

Updated on: 2026-03-15T11:55:37+05:30

98 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements