Transformations, Transitions, and Animations

Question 1

How to rotate a box when we hover?

Answer 1

.box{
transform: rotate(15deg)
}

Question 2

How to make a box larger?

Answer 2

.box{
transform: sclae(1.5);
}

Question 3

How to make a box skew?

Answer 3

.box{
transform: skew(1.5);
}

Question 4

How to move a box?

Answer 4

transform: translate(horizontal_axis, vertical_axis)

Question 5

How to achieve 3-D transformation?

Answer 5

We have to use perspective

.box:hover{
transform: perspective(200px) translateZ()
}

Question 6

What are different transformation functions available?

Answer 6

translate
rotate
scale
skew

Question 7

What is transition?

Answer 7

Transition: property_name time ease-in|linear delay_time

transition: transform .5s;
transition: transform .5s ease-out;
transition: transform .5s ease-out 1s; /* 1s delay */
transition: transform .5s, color .3s;

Question 8

How to apply Animation?

Answer 8

@keyframes pop {   
0% { 
   transform: scale(1); 
}   
50% { 
   transform: scale(1.5);
}    
75% { 
   transform: rotate(45deg); background: tomato; 
}   
100% { 
   transform: rotate(0); }
}

.box {
animation: pop 3s ease-out;
}

Question 9

Easy way of applying animation?

Answer 9

aimation.style