Transforms
In this module you can find standard mixins for prefix-free CSS transform properties.
File
lightingfly/modules/_transforms.scssLinks
Specification for CSS 3 transforms.: w3.org
Another specification for CSS 3 animations: msdn.microsoft.com
Learn to CSS 3 animations: w3schools.com
transform
Mixin for prefix-free using transform property
Mixin
@mixin transform($arguments...)Arguments
$arguments...:
[rotate(15deg), translateZ(0), ...]
- list of transform functions
Usage example
Demo
Few examples of transformed elements.
Other mixins used in demo: perspective, box-shadow
transform-origin
Mixin for prefix-free using transform-origin property
Mixin
@mixin transform-origin($origin)Arguments
$origin:
[left, top, 50%, 100px]
- origin for transform
Usage example
Demo
First element has origin in center, second has origin in left
Other mixins used in demo: animation, keyframes, transform, border-radius
transform-style
Mixin for prefix-free using transform-style property
Mixin
@mixin transform-style($style)Arguments
$style:
[flat, preserve-3d]
- style for transform
Usage example
Demo
Click to change transform-style
Other mixins used in demo: animation, keyframes, transform, perspective
perspective-origin
Mixin for prefix-free using perspective-origin property
Mixin
@mixin perspective-origin($origin)Arguments
$origin:
[100px, 50%, left, ...]
- origin for perspective
Usage example
Demo
Animation of changing perspective origin
Other mixins used in demo: transform, transform-style, perspective, animation, keyframes
backface-visibility
Mixin for prefix-free using backface-visibility property
Mixin
@mixin backface-visibility($visibility)Arguments
$visibility:
[hidden, visible]
- backface visibility
Usage example
Demo
Click on cube to change backface-visibility
Other mixins used in demo: transform, transform-style, perspective, animation, keyframes