Menu

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
div {
-webkit-transition: border 2s;
transition: width 2s;
}
div:hover {
width: 500px;
}

 

Note:
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

div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; transition: width 2s, height 2s, transform 2s;
}

 

More Transition Examples

div {
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 2s;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 2s;
}

 

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

Note:

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.

div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate;
}
@-webkit-keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

 

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.

Nisarg Mehta Nisarg Mehta

Nisarg Mehta, CEO & Chairman of Techtic Solutions, is the vision of the company. Nisarg is active in operations in his daily routine as he is one of the key decision makers in terms of technological advancements of the company. He is a friendly leader with hardworking, motivating, visionary and passionate personality.

Join over 10,000 people who
love best articles, and tips.

Relevant Blog

UI VS UX: SIMILARITIES & DISSIMILARITIES?
Nisarg Mehta

UI VS UX: SIMILARITIES & DISSIMILARITIES?

Published on Dec 30, 2014 by Nisarg Mehta

The simple definition of UI (User Interface) is that it is a part of the product which is being seen by the user when he looks into the site, where as the UX (User Experience) is what they feel when they see the site. UX is a term which has its meaning in a much broader way than that of the UI. In a nutshell we will focus on UI Vs UX during the entire article. Better UX is just as having smooth operating and it gives the user a feeling of ease while visiting the site. Whereas, the good UI is the materialistic approach of making the visit on the site look good. Overall, the complete package is what that makes good UX and the good UI is obviously an important inner element of it. As per the experts, UX and UI are some of the very confusing and misused terms in this field. Without UX, UI is just like a painter painting the canvas without any thought in minds, whereas the UX without UI is just like a sculpture framed without any paper Mache. For an amazing product experience UX an UI are equally important.

Read More
Start A Project

Let's Start With Discovery Session!

Please share your contact information, for us to connect with you and offer you a free discovery session about your digital product.