TransWikia.com

How do I rotate an object 90 degrees using JQuery

Stack Overflow Asked by bullybear17 on November 12, 2021

I am trying to manipulate my html using jquery and would like to rotate the object 90 degrees so the head of the object precedes the tail. I am able to move the object from the top right to the bottom left how I wanted using keyframes – however it transfers there in a horizontal fashion and not a more vertical fashion like how I had hoped.

Here is my code:

<div class="f p-2"></div>

@keyframes particleAnimationFlorida
{
0% {
      transform: translateX(-10px) translateY(0px)
  }
  100% {
      transform: translateX(-50px) translateY(300px);
  }
}

$(".f").css({"position": "absolute", "width": "10px", "height": "1px", "top": "110px", 
"right": "400px", "background-color": "black", "animation-name": "particleAnimationFlorida", 
"animation-timing-function": "linear", "animation-iteration-count": "11" });

$(".p-2").css({"position": "absolute", "display": "block", "content": "''", "width": "50px", 
"height": "1px", "background": "linear-gradient(-10deg, rgba(0,0,0,0) 0%,rgba(0,0,255,0.8) 
100%)", "transform": "translateX(10%) rotateZ(10deg)", "animation-duration": "3s"});

Here is my fiddle:

https://jsfiddle.net/bullybear/m826gkrt/212/

3 Answers

Just add rotate(90deg) to your transform.

https://www.w3schools.com/cssref/css3_pr_transform.asp

Answered by pr0cz on November 12, 2021

Your animation is overriding the rotation set by your JavaScript. Add the rotation transform to each of the keyframes in the animation.

@keyframes particleAnimationFlorida
  {
    0% {
          transform: translateX(-10px) translateY(0px) rotateZ(-80deg);
      }
      100% {
          transform: translateX(-50px) translateY(300px) rotateZ(-80deg);
      }
  }

Fiddle: https://jsfiddle.net/q2j34dsy/

Answered by Brilliand on November 12, 2021

Add rotate(xdeg) in CSS code, x - rotaion

@keyframes particleAnimationFlorida {
  0% {
    transform: translateX(-10px) translateY(0px) rotate(90deg);
  }
  100% {
    transform: translateX(-50px) translateY(300px) rotate(90deg);
  }
}

Answered by Michael Chon on November 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP