Add more transformations

src/CSS/Transform.purs

@@ -3,7 +3,7 @@ module CSS.Transform where
 import Prelude
 import CSS.Common (class Inherit, class Initial, class Unset)
 import CSS.Property (class Val, Value, noCommas, value)
-import CSS.Size (Angle, Abs, Size)
+import CSS.Size (Angle, Size)
 import CSS.String (fromString)
 import CSS.Stylesheet (CSS, key)
 import Data.Tuple.Nested (tuple3)
@@ -22,12 +22,83 @@ transform = key $ fromString "transform"
 transforms :: Array Transformation -> CSS
 transforms = key (fromString "transform") <<< noCommas
 
-translate :: Size Abs -> Size Abs -> Transformation
-translate x y = Transformation $ fromString "translate(" <> value [x, y] <> fromString ")"
+translate :: forall a b. Size a -> Size b -> Transformation
+translate x y = Transformation $ fromString "translate(" <> value [value x, value y] <> fromString ")"
+
+translateX :: forall a. Size a -> Transformation
+translateX x = Transformation $ fromString "translateX(" <> value x <> fromString ")"
+
+translateY :: forall a. Size a -> Transformation
+translateY y = Transformation $ fromString "translateY(" <> value y <> fromString ")"
+
+translateZ :: forall a. Size a -> Transformation
+translateZ z = Transformation $ fromString "translateZ(" <> value z <> fromString ")"
+
+translate3d :: forall a b c. Size a -> Size b -> Size c -> Transformation
+translate3d x y z = Transformation $ fromString "translate3d(" <> value [value x, value y, value z] <> fromString ")"
+
+scale :: Number -> Number -> Transformation
+scale x y = Transformation $ fromString "scale(" <> value [x, y] <> fromString ")"
+
+scaleX :: Number -> Transformation
+scaleX x = Transformation $ fromString "scaleX(" <> value x <> fromString ")"
+
+scaleY :: Number -> Transformation
+scaleY y = Transformation $ fromString "scaleY(" <> value y <> fromString ")"
+
+scaleZ :: Number -> Transformation
+scaleZ z = Transformation $ fromString "scaleZ(" <> value z <> fromString ")"
+
+scale3d :: Number -> Number -> Number -> Transformation
+scale3d x y z = Transformation $ fromString "scale3d(" <> value [x, y, z] <> fromString ")"
 
 rotate :: forall a. Angle a -> Transformation
 rotate a = Transformation $ fromString "rotate(" <> value a <> fromString ")"
 
+rotateX :: forall a. Angle a -> Transformation
+rotateX x = Transformation $ fromString "rotateX(" <> value x <> fromString ")"
+
+rotateY :: forall a. Angle a -> Transformation
+rotateY y = Transformation $ fromString "rotateY(" <> value y <> fromString ")"
+
+rotateZ :: forall a. Angle a -> Transformation
+rotateZ z = Transformation $ fromString "rotateZ(" <> value z <> fromString ")"
+
+rotate3d :: forall a. Number -> Number -> Number -> Angle a -> Transformation
+rotate3d x y z a = Transformation $ fromString "rotate3d(" <> value [value x, value y, value z, value a] <> fromString ")"
+
+skew :: Number -> Number -> Transformation
+skew x y = Transformation $ fromString "skew(" <> value [x, y] <> fromString ")"
+
+skewX :: Number -> Transformation
+skewX x = Transformation $ fromString "skewX(" <> value x <> fromString ")"
+
+skewY :: Number -> Transformation
+skewY y = Transformation $ fromString "skewY(" <> value y <> fromString ")"
+
+perspective :: Number -> Transformation
+perspective p = Transformation $ fromString "perspective(" <> value p <> fromString ")"
+
+matrix :: Number -> Number -> Number -> Number -> Number -> Number -> Transformation
+matrix u v w x y z = Transformation $ fromString "matrix3d(" <> value [ u, v, w, x, y, z ] <> fromString ")"
+
+matrix3d
+  :: Number -> Number -> Number -> Number
+  -> Number -> Number -> Number -> Number
+  -> Number -> Number -> Number -> Number
+  -> Number -> Number -> Number -> Number
+  -> Transformation
+matrix3d w0 x0 y0 z0
+         w1 x1 y1 z1
+         w2 x2 y2 z2
+         w3 x3 y3 z3 =
+  Transformation $ fromString "matrix3d(" <> value
+       [ w0, x0, y0, z0
+       , w1, x1, y1, z1
+       , w2, x2, y2, z2
+       , w3, x3, y3, z3
+       ] <> fromString ")"
+
 data TransformOrigin a
   = TransformOrigin (TransformOriginOffset a) (TransformOriginOffset a) (Size a)
   | Initial

test/Main.purs

@@ -4,9 +4,10 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Exception (error, throwException)
-import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, transform)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
+import CSS.Transform as Transform
 import Data.Maybe (Maybe(..))
 import Data.NonEmpty (singleton)
 
@@ -95,6 +96,16 @@ adjacentSelector = render do
   a |+ a ? do
     display inlineBlock
 
+scaleTransform1 :: Rendered
+scaleTransform1 = render do
+  transform $ Transform.scaleX 1.0
+  transform $ Transform.scaleY 0.5
+  transform $ Transform.scaleZ 0.5
+
+scaleTransform2 :: Rendered
+scaleTransform2 = render do
+  transform $ Transform.scale 0.2 0.8
+
 exampleFontStyle1 :: Rendered
 exampleFontStyle1 = render do
   fontStyle FontStyle.italic
@@ -171,3 +182,6 @@ main = do
   renderedSheet attrSpace `assertEqual` Just "p[foo~='bar'] { display: block }\n"
   renderedSheet attrHyph `assertEqual` Just "p[foo|='bar'] { display: block }\n"
 
+  renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)"
+  renderedInline scaleTransform2 `assertEqual` Just "transform: scale(0.2, 0.8)"
+