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 Property - CSS T...
Follow the link for previous video:
CSS Tutorial 87 - CSS transform Property | CSS transform functions
• CSS transform Property - CSS Tutorial 87
=========================================
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 YouTube channel:
/ chidrestechtutorials
► Visit our Website:
https://www.chidrestechtutorials.com
=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial
Auf dieser Seite können Sie das Online-Video CSS transform Functions - CSS Tutorial 88 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer ChidresTechTutorials 09 Januar 2019 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 11,565 Mal angesehen und es wurde von 239 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
