CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
Arun Kumar M
Arun Kumar M

Reputation: 1601

Rotate object 360 degree with some tilted angle or in ellipse shape using css or js

I am trying to rotate arm object on top of cylinder which is placed with some angle to get maxium view of full object.

Hence I need to rotate arm on top of cylinder which should look like it is tilted same as cylinder using css or javascript.

Help me to achive this. Thank you...

.scara-arm {
  width: 30px;
  height: 30px;
  margin: 1px auto;
  transform: rotate(0deg);
}

.scara-arm.autoplay {
  animation: rotatearm 8s linear infinite;
  -webkit-animation: rotatearm 8s linear infinite;
}

Demo with code

Upvotes: 0

Views: 1064

Answers (2)

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8950

I think what you are looking for is rotate3d() transformation. You can define the axis and make it rotate around that.

You can give it as something like this:

@keyframes rotatearm {
      0%  { -webkit-transform: rotate3d(0, 0.6, 1.3, 0deg) }
    100%  { -webkit-transform: rotate3d(0, 0.6, 1.3, 360deg) }
}

These values might not look perfect (I just put some values which looked good), but I hope you get the idea. You can find the perfectly matching axis and set it.

Here is a sample fiddle: jsfiddle

Hope it helps :)

Upvotes: 1

wiiiiilllllll
wiiiiilllllll

Reputation: 577

To give the arm a 3d look you need to rotate it in the X axis - this is in addition to the Z axis rotation that you're already doing.

.scara-arm {
  transform: rotateZ(0deg) rotateX(55deg);
}

Be aware, this needs to be changed in several places - all of your existing transform: rotate will need to be changed to transform: rotateZ before you add the rotateX.

Also you can improve the 3d effect by adding some perspective to the arm's container:

.circle-small {
  perspective: 75em;
}

I recommend you try playing around with the numbers for perspective (CSS line #43) and rotateX (CSS lines 77 and 252-268) to improve the 3d effect.

Updated demo here

Upvotes: 2

Related Questions