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

Follow the link for previous video:
CSS Tutorial 87 - CSS transform Property | CSS transform functions

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial