Maths (Trigonometry)

http://codepen.io/bbuecherl/pen/gbPBQV

Math with CSS

• calc() allows +|-|*|/-operations | Support ~80%
• CSS Variables and var() | Support: ~11%

Preprocessors!

SASS, Less, Stylus

Math with Sass

• Better variables
• Loops, conditions, improved arithmetics
• Math functions:

  percentage($number)
  ceil($number)
  round($number)
  floor($number)
  abs($number)
  min($number)
  max($number)
  random([$limit])

Math with Compass for Sass

http://compass-style.org/
Aditional Math functions:

pi()
sin($number)
cos($number)
tan($number)
asin($number)
acos($number)
atan($numter)
e()
logarithm($number [, $base])
sqrt($number)
pow($number, $exponent)

Note: Less and Stylus use a very similar math syntax

CSS Transforms

Reference: MDN

transform: none | [matrix(<a>, <b>, <c>, <d>, <tx>, <ty>)
    | matrix3d(<a1>, <b1>, <c1>, <d1>, <a2>, <b2>, <c2>, <d2>, <a3>,
    <b3>, <c3>, <d3>, <a4>, <b4>, <c4>, <d4>) | perspective(<l>)
    | rotate(<angle>) | rotate3d(<x>, <y>, <z>, <angle>)
    | rotateX(<angle>) | rotateY(<angle>) | rotateZ(<angle>)
    | scale(<sx>[, <sy>]) | scale3d(<sx>, <sy>, <sz>)
    | scaleX(<scale>) | scaleY(<scale>) | scaleZ(<scale>)
    | skew(<ax>[, <ay>]) | skewX(<angle>) | skewY(<angle>)
    | translate(<tx>[, <ty>]) | translate3d(<tx>, <ty>, <tz>)
    | translateX(<t>) | translateY(<t>) | translateZ(<t>) ]+;
transform-origin: [ <percentage> | <length> | left | center | right
    | top | bottom] | [ [ <percentage> | <length> | left | center
    | right ] && [ <percentage> | <length> | top | center
    | bottom ] ] <length>?;
transform-style: flat | preserve-3d;
perspective: none | <length>;
perspective-origin: [ <percentage> | <length> | left | center
    | right | top | bottom] | [ [ <percentage> | <length> | left
    | center | right ] && [ <percentage> | <length> | top
    | center | bottom ] ];
backface-visibility: visible | hidden;

CSS Animations

Reference: MDN

animation: [ <name> || <time> || [linear | ease | ease-in
    | ease-in-out | ease-out | step-start | step-end
    | cubic-bezier(<x1>, <y1>, <x2>, <y2>)
    | steps(<number_of_steps>, <direction>)]
    || <time> || [infinite | <number>]
    || [normal | reverse | alternate | alternate-reverse] ||
    [none | forwards | backwards | both] || [running | paused]]#;