rotate - transition css

Cómo hacer que la brújula mixin transform-origin tenga efecto

Question

Tengo un problema extraño con transform s en brújula.

Quiero mover el eje con transform-origin(50% 100%) a la parte inferior, que funciona si lo escribo en firebug.

Pero si utilizo el @include transform-origin(50% 100%) mixin @include transform-origin(50% 100%) no es visible en Firebug. Solo se aplica la parte de rotación @include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg)); .

En el CSS compilado, puedo encontrar esta línea, pero no se aplica de ninguna manera y se escribe con tres valores. -moz-transform-origin:50% 100% 50%;

Mi SASS se ve así:

div#loader {
  @include transition-property(transform);
  @include transition-duration(3s);
  @include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg));
  @include transform-origin(50% 100%); // This is not taking affect in final css
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

Cuál podría ser la razón para eso?

Si escribo la línea -moz-transform-origin:50% 100%; directamente en mi SASS también funciona.

Answer 1

Brújula, piense que pasa solo un parámetro (sin coma) e intenta agregar otro. En la documentación de la brújula puedes encontrar este comentario:

// Transform-origin sent as individual arguments:
//
//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )

entonces deberías usar el siguiente código:

@include transform-origin(50%, 100%);