CSS Transforms Lightning Talk

css_transforms_lightning_talk.md

Getting Started with CSS Transitions and Transformations

• Two properites to know: transition and transform
• With these two properties, any selector or pseudo-selector can be made interactive for the user and way more awesome.

Transform Options

• transform is used to specify the changes that will be made to the element itself.
• transform-origin can be used to specify the position of the transformation. Default is the center of the element.
• Some fun transform options:
  • scale(): effects the size of the element
  • skewX() & skewY(): tilts the element to the left or right
  • translate(): moves an element to the left or up and down
  • rotate(): rotate the element clockwise

Transition Options

• transition is used to control the timing, duration, and style of a change between two states of an element. It is shorthand for the following properties:
  • transition-delay default: 0s
  • transition-duration default: 0s
  • transition-property default: all
  • transition-timing-function default: ease
• Transitions provide quite a bit of control on the look and feel of the transformation applied to an element.

My Pen

References & Examples

http://ianlunn.github.io/Hover/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

https://css-tricks.com/almanac/properties/t/transform/

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

http://codepen.io/Gil_Nakar/pen/Bovmax