Chapter 6 : CSS3 Transform & Transitions Flashcards
What does CSS3 Transforms allows?
- Translate, rotate, scale and skew elements
- Supports 2D and 3D transformations
List out CSS transformation methods ( 6 )
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrx()
What does the translate() method do? ( CSS 2D )
- Moves an element from its current position ( According to the parameters given for the X-axis and the Y-axis )
Create a div element that moves the div element 50 pixels to the right and 100pixels down from its current position
1. Compatible with Safari and Default Syntax
div
{
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div:hover
{
/Safari/
-webkit-transform: translate(50px,100px);
/Default Syntax/
- transform: translate(50px,100px);
}
What does the rotate() element do?
- Rotates an element clockwise or counter-clockwise according to a given degree
How to rotate the element clockwise with 20 degrees?
div:hover
{
/Safari/
-webkit-transform: rotate(20deg);
/Default Syntax/
transform: rotate(20deg);
}
What does scale() method do?
- Increase / Decrease the size of an element given for the width and height
How to scale the element 2 times of its original width, and three times of its original height? ( Using <div> element )
div
{
-ms-transform: scale( 2, 3 );
-webkit-transform: scale(2, 3 );
transform: scale(2,3)
}
What does the skewX() method does to an element?
- Skews an element along the X-axis by the given angle
How to skews the <div> element 20 degress along the x-asis
div
{
-ms-transform: skewX(2-deg);
- webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
What does the skewY() method does to an element?
- Skews an element along the Y-axis by the given angle
How to skews the <div> element 20 degress along the y-asis?
div
{
-ms-transform: skewY(2-deg);
- webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
List out 3 examples of 3D transformation methods
- rotateX()
- rotateY()
- rotateZ()
What does roateX() does?
- Rotates an element around its X-axis at a given degree
How to rotate the x-axis div element for 150 degree?
div
{
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);
}
What does rotateY() does?
- Rotates an element around its Y-axis at a given degree
How to rotate the y-axis div element for 150 degree?
div
{
-webkit-transform: rotateY(150deg);
transform: rotateY(150deg);
}
What does rotateZ() does?
- Rotates an element around its Z-axis at a given degree
How to rotate the z-axis div element for 90 degree?
div
{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
What does CSS3 transitions allows us to do?
- It allows us to change property values smoothly ( fron one value to another), over a given duration
List out 2 things that I need to specify to create a transition effect
- The CSS property I want to add an effect to
- The duration of the effect
What will happen if the duration part is not specified?
- The transition will have no effect ( no animation ), because the default value is 0
How to create a div element so that when it hovers, it width will increase to 300px the the div will extend its container until 300px for 2 seconds?
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width: 2s;
transition: width 2s;
}
div:hover
{
width: 300px;
}
What does the transition-timing-function property specifies?
- Specifies the speed curve of the transition effect
List out all 6 values for transition-timing-function property
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier( n, n , n , n)
What does ease specifies?
- Specifies a transition effect with a slow start, then fast, then end slowly
What does linear specifies?
- Specifies a transition effect with the same speed from start to end
What does ease-in specifies?
- Specifies a transition effect with a slow start
What does ease-out specifies?
- Specifies a transition effect with a slow end
What does ease-in-out?
- Specifies a transition effect with a slow start and end
What does cubic-bezier specifies?
- Lets us define own values in a cubic-bezier function
- cubic-beizier( x1, y1 , x2,y2 )
P1 = x1 , y1
P2 = x2, y2
The animation will float like ~ from P1 to P2
What does the transition-delay propety specifies ?
- Specifies a delay ( in seconds) for the transition effect
How to create a div with 1 second delay before starting?
div
{
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
