/AppLanding/js/vendor/lesshat/mixins/transform/transform.md

https://gitlab.com/webocalypse/themes · Markdown · 38 lines · 25 code · 13 blank · 0 comment · 0 complexity · a3fe3ffcd9e4a43e3ce50d7fbb173769 MD5 · raw file

  1. ### <a name="transform"></a> &#8226; transform
  2. **Summary:**
  3. The CSS transform property lets you modify the coordinate space of the CSS visual formatting model.
  4. Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/transform)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)**
  5. **Syntax:**
  6. Default value: none
  7. .transform(none | <transform-function>+)
  8. **Tips and tricks:**
  9. If you omit units, `transform` can adds correct unit automatically.
  10. translate: 'px',
  11. rotate: 'deg',
  12. rotate3d: 'deg',
  13. skew: 'deg'
  14. **Example:**
  15. div {
  16. .transform(scale(.5) translate(10, 20));
  17. }
  18. // Result
  19. div {
  20. -webkit-transform: scale(.5) translate(10, 20);
  21. -moz-transform: scale(.5) translate(10, 20);
  22. -opera-transform: scale(.5) translate(10, 20);
  23. -ms-transform: scale(.5) translate(10, 20);
  24. transform: scale(.5) translate(10, 20);
  25. }