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
In questa pagina del sito puoi guardare il video online CSS transform Functions - CSS Tutorial 88 della durata di ore minuti seconda in buona qualità , che l'utente ha caricato ChidresTechTutorials 09 gennaio 2019, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 11,565 volte e gli è piaciuto 239 spettatori. Buona visione!
