HTML - how to rotate back and forth, like a radar towards your and away from you 2.5D

I have a requirement, that needs to rotate an image with some realistic sense - on a skewed horizontal plane with eye level, imagine a spinning flying disc or helicopter blades.

By that I mean, (not a flat rotation like a spinner) but something that gets bigger when it its facing your disappears as it spins back - on a skewed horizontal plane with eye level.

objective is to get a realistic look with an icon or an image, where it looks like its rotating in 2.5D with HTML

  1. Can this done with HTML5 simply, with out a canvas.
  2. Can you share an example with either canvas or straight HTML5 trickery

Answers


You can do this in CSS3 using a 3D transform:

transform: rotateX(45deg);

And on the container:

perspective: 500px;

Experiment with the exact values to get the effect you want.


Need Your Help

C++ — Question about typedef

c++

Given the following code:

Why is my stubbed method returning null?

java mockito stub inject

I have a class Dummy. I inject 3 variables. However, one of them is not injectable because it is an interface. So I inject an object, one of whose methods return the needed type.