Transforms
- The transform property in CSS allows us to transform the shape of elements in 2D or 3D space, and thus can be animated
- 2D Transforms:
- You can move the object from 0 to 360 degrees so that the positive sign symbolizes clockwise rotation, and the positive sign denotes the opposite. So that the rotation movement becomes the X axis and the Y axis. Also, you can change the size so that the original size is 1, the zoom is greater than 1, and the reduction opposite .
- SO, you can control several features of the two-dimensional plane,like : Transform Origin,Perspective .
- 3D Transforms:
- As 2-D plane you can add your effect on this , but the deffrint is the you can apply it on z-axis . if you understand the z-axis direction and how it will replay it easy to add effect as 2-D, like : 3D Rotate,3D Scale,3D Translate, 3D Skew
Transitions & Animations in CSS :
One evolution with CSS3 was the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true.
With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.
Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.
8 SIMPLE CSS3 TRANSITIONS THAT WILL WOW YOUR USERS :
- Fade in
- Change color
- Grow & Shrink
- Rotate elements
- Square to circle
- 3D shadow
- Swing
- Inset border