CODEWITHSUNDEEP
htmlcssrotation
jack blank
jack blank

Reputation: 5195

Trouble rotating div so that it ends adjacent to container

For my example I want the div to animate 100% of the height so that it is above the container. This works. But know i want the bottom right of the animated div to pivot against the top right of the container. It starts off good(in FF) but then the animated div moves below the container it should be adjacent to the right side of the container.

    .container{
        margin: 10% auto;
        width: 900px;
        position: relative;
        background: red;
    }
    .wrapper{
        width: 100px;
        height: 200px;
        bottom: 0;
        right: 0;
    }
    .box{
        width: 100px;
        height: 200px;
        background: tomato;
        position: absolute;
        right: 0;
        /*transform: rotate(180deg);*/
        animation: rotateAnim 2s forwards;
        transform-origin : 100% 100%;
    }
    .hider{
        width: 100px;
        height: 200px;
        /*background: white;*/
        position: absolute;
        right: 0;
        z-index: 1;
    }

    @keyframes rotateAnim{
        50%{
            transform: translate(0%, -100%);
        }
        100%{
            transform: translate(0%, -100%);
            transform: rotate(180deg);
        }
    }

html:

<div class="container">
    <div class="wrapper">
        <div class="box">test</div>
        <div class="hider"></div>
    </div>

</div>

FIDDLE

enter image description here

Upvotes: 0

Views: 75

Answers (2)

sadiqevani
sadiqevani

Reputation: 500

Okay, so i've figured it out, from the looks of your CSS (which btw you haven't added vendor prefixes, and on Safari didn't work. Just letting you know), you are adding two times the transform property and the second property is overwriting the first one, if you want to add two transform cases, just add each one of the functions side by side without commas.

The reason why the menu is being displayed that way, is because transform does not change the dom layout, or effect the elements around it, it just keeps the original element where it was, and you are only seeing a like a ghost of that original element into the next position.

Now with the solution, since you are rotating the element 180deg, the element will be pushed downwards, so you have to push it up by 100% of its size.

TL;DR:

@keyframes rotateAnim{
            50%{
                transform: translate(0%, -100%);
            }
            100%{
                transform: rotate(180deg) translate(0%, 100%);
            }
}

enter image description here

Upvotes: 1

cs.edoardo
cs.edoardo

Reputation: 544

Something like this? http://jsfiddle.net/1wqzjfar/

transform-origin: right bottom;
transform: rotate(180deg);
transform-origin: 100% 50%;

You need to use transform-origin to find the correct "centre of rotation" for your element (that in your case i think is: 'animated div to pivot against the top right of the container' as you said)

Upvotes: 0

Related Questions