HTML and CSS Reference
In-Depth Information
We place the registraion point at the botom of the arrow. This allows us to rotate the arrow
nicely. The following screenshot shows how the arrow rotates:
Classified intel
We used Flash to create and export the graphics hierarchy. Thanks to the high-level
integraion between Adobe Flash and the CreateJS library, we can design the graphics
structure and outlook in Flash and then directly use them in the code. In case we don't
have Flash, we can create the same effect without the need of Flash by using several
techniques. I'll describe some of them later in the project.
If we are creaing this approach in the EaselJS library, we programmaically create a red
rectangular shape and add it to the container that contains the arrow graphics. Then,
we set the registraion point of this container to the same posiion as we showed in the
previous screenshot.
If we are creaing these graphics with DOM and CSS, we can create the graphics structure
in DOM. Then, we posiion and rotate the arrow by seing the transform-origin point to
the DOM.
You can ind more informaion about using CSS transform-origin at
http://css-tricks.
com/almanac/properties/t/transform-origin/
.
