CODEWITHSUNDEEP
jquerycssrotationtransform
DB1500
DB1500

Reputation: 155

Rotate beyond 360 with transition

Here is a codepen.

On clicking the button, I toggle the class 'in-view' and the "bars" transform into an "X" by rotating the :before and :after 45deg and -45deg respectively, while making the middle bar transparent. I thought it would look cool to spin an extra 360 before finishing in this position, (therefore I want them to rotate a total of 405deg). However, it seems to only rotate the 45deg still? Any ideas why?

<div class="menu-button">
    <div></div>
</div>

.menu-button div.in-view {
    background: transparent;
}
.menu-button div.in-view:before,
.menu-button div.in-view:after {
    top: 0;
    transform: translateX(-50%) rotate(-405deg);
    -webkit-transform: translateX(-50%) rotate(-405deg);
}
.menu-button div.in-view::after {
    transform: translateX(-50%) rotate(405deg);
    -webkit-transform: translateX(-50%) rotate(405deg);
}

Upvotes: 0

Views: 106

Answers (1)

Paulie_D
Paulie_D

Reputation: 115313

You need to set a start rotate value

.menu-button div::before,
.menu-button div::after {
    transform: translateX(-50%) rotate(0); /* here */
}

Codepen Demo

Upvotes: 1

Related Questions