CSS transform Functions - CSS Tutorial 88

Notes for You:: CSS transform Functions - CSS Tutorial 88
CSS transform property.
- allows us to transform an HTML element
Transform: means translate, rotate, scale and skew
Translate:
- means changing position of an html element
Rotate:
- means changing orientation of an html element
Scale:
- means changing size of an html element
Skew:
- means changing slant of an html element
Syntax:
transform: one or more transform functions + perspective function;
Transform functions:
translateX(x)
translateY(y)
translateZ(z)
translate(x,y)
translate3D(x,y,z)
Note: x in px or % , y in px or % , z in px
rotateX(x)
rotateY(y)
rotateZ(z)
rotate(x,y)
rotate3D(x,y,z)
Note: x, y, z in deg
scaleX(x)
scaleY(y)
scaleZ(z)
scale(x,y)
scale3D(x,y,z)
Note: x, y, z in number
skewX(x)
skewY(y)
skew(x,y)
Note: x, y in deg
Perspective function: is used to define depth
perspective(z in pixels)
Example Code:
transform:perspective(400px) translateX(100px);
transform:perspective(400px) rotateZ(45deg);
transform:perspective(400px) scaleX (2);
transform:perspective(400px) skewX (45deg);
transform:perspective(400px) translate(100px,100px);
transform:perspective(400px) scale(2,0.5);
transform:perspective(400px) translate3D(100px,100px,-100px);
transform:perspective(400px) translateX(100px) rotate(45deg) scaleX(2);
=========================================
Follow the link for next video:
CSS Tutorial 89 - CSS transform-origin Property
• CSS transform-origin P...
Follow the link for previous video:
CSS Tutorial 87 - CSS transform Property | CSS transform functions
• CSS transform Property...
=========================================
CSS Tutorials Playlist:-
• CSS Tutorials
=========================================
Watch My Other Useful Tutorials:-
HTML Tutorials Playlist:-
• HTML Tutorials
JavaScript Tutorials Playlist:-
• JavaScript Tutorials
jQuery Tutorials Playlist:-
• jQuery Tutorials
=========================================
► Subscribe to our KZbin channel:
/ chidrestechtutorials
► Visit our Website:
www.chidrestec...
=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial