Not so pretty CSS notebook
Transitions and Animations
Button Transition
Effects:
Hover on boxes to see them moving
ease
linear
ease in
ease in out
ease out
Transform
Transform has Four functions:
scale(number) resize elements
translate(horizontal num, vertical num) move element, change position
rotate(degree num) rotate element
skew(x axis, y axis) skew element
usage:
transition: transform and duration => transform: translate(value)
Transform
Scale
Rotate
Skew
Transform Origin play
transform origin
Transform infinite play
transform origin
translateZ - move item on Z axis (bring it closer to your eyes, almost same effect as scale)
rotate Z - rotate item on Z axis (this turns out is just a regular rotate property 🤯)
rotate X - rotate item on X axis (horizontal axis)
rotate Y - rotate item on Y axis (vertical axis)