Webbing Wednesdays Week #11

CSS3 Transitions, Transforms, Animations

CSS3 Transforms

With the help of CSS3 transform, one can move, scale, turn, spin, and stretch elements easily. We can also change shape, size and position of an element.

On the other hand, we can transform our elements using 2D or 3D transformation.

Numbers followed by -ms-, -webkit-, -moz-, or -o- specifies the first version that worked with prefix.

CSS3 2D Transforms

2D transform methods

  • translate() : -ms-transform: translate(50px,100px);

With translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

  • rotate() : -ms-transform: rotate(30deg);

With the rotate() method, elements rotate clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.

  • scale() : -ms-transform: scale(2,4);

With the scale() method, element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

  • skew() : -ms-transform: skew(30deg,20deg);

With skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

  • matrix() : -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

The matrix method takes six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate) and skew elements.

CSS3 Transform Properties are transform, transform-origin

CSS3 3D Transforms

3D Transform Methods

  • matrix3d: Defines 3D transformation, using a 4×4 matrix of 16 values
  • translate3d: Defines 3D translation
  • scale3d: Defines 3D scale transformation
  • rotate3d: Defines 3D rotation
  • perspective: Defines a perspective view for a 3D transformed element

CSS3 Transform Properties are transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility

CSS3 Transitions

With the help of CSS3, we can add an effect while changing from one style to another.
For the Transitions, Flash or JavaScripts are not required.

Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Two things are necessary for the transitions:

  • The CSS property which we want to add an effect into and
  • The duration of the effect


For transitions, duration is necessary to specify because the default value is 0. If there is no defined duration, transitions will not happen.

Transition effect will start when the specified CSS property changes its value. CSS property will change when a user mouse-over on an element:

Multiple Changes


More Transition Examples


CSS3 Transition Properties are transition, transition-delay, transition-duration, transition-property, transition-timing-function

CSS3 Animations

With CSS3, we can create animations that can replace Flash animations, animated images and JavaScripts in existing web pages.

Numbers followed by -webkit-, -moz-, or -o- specifies first version that worked with a prefix.

Two properties are important for Animation:

  • name of the animation
  • duration of the animation


For animation, duration is necessary to be specified because the default value is 0. If there is no defined duration, animation will not happen.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords ‘from’ and ‘to’ (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.


CSS3 Animation Properties are @keyframes, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function.

Article Name
How to Use CSS3 Transitions?
CSS3 is one of the very versatile and highly flexible CSS until now. Techtic Solutions shares various tips and tricks of CSS3.
Publisher Name
Techtic Solutions
Publisher Logo
Categories: Webbing DesignsWebbing DevelopmentWebbing Wednesdays
Tags: CSS3 Animations CSS3 Tips and Tricks CSS3 Transitions