This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Css.Transform3

Transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size, and position.

#Functions

transform3 : List String -> Styles -> Styles

This function takes a list of transforms and applies them to the element.

import Css.Transform3 exposing (..)

-- [ ("transform", "translate3(100px, 100px, 0px) rotate3(1, 1, 1, 45deg)") ]
transform3 [ translate3 100 100 0, rotate1 1 1 1 45 ] []
perspective : number -> String

Defines a perspective view for a 3D transformed element.

-- [ ("transform", "perspective(800)") ] transform3 [ perspective 800 ]

translate3 : number -> number -> number -> String

Moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

import Css.Transform3 exposing (..)

-- [ ("transform", "translate3d(100px, 100px, 0px)") ]
transform3 [ translate3 100 100 0 ] []
rotate3 : number -> number -> number -> number -> String

Rotates the element around a specified axis at a given degree.

import Css.Transform3 exposing (..)

-- [ ("transform", "rotate3d(1, 1, 1, 45deg)") ]
transform3 [ rotate3 1 1 1 45 ] []
scale3 : number -> number -> number -> String

Scale an element along the given axis.

import Css.Transform3 exposing (..)

-- [ ("transform", "scale3d(1, 2, 1)") ]
transform3 [ scale3 1 2 1 ] []
module Css.Transform3 where

{-| Transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size,
and position.

#Functions
@docs transform3, perspective, translate3, rotate3, scale3

-}

-- Native Imports
import String

-- Third Party Imports
import Vendor

-- My Imports
import Css exposing (Styles, style)


{-| This function takes a list of transforms and applies them
to the element.

    import Css.Transform3 exposing (..)

    -- [ ("transform", "translate3(100px, 100px, 0px) rotate3(1, 1, 1, 45deg)") ]
    transform3 [ translate3 100 100 0, rotate1 1 1 1 45 ] []
-}
transform3 : List String -> Styles -> Styles
transform3 transforms styles =
  let string = String.join " " transforms
      prefix = Vendor.prefix
      name = "transform"
  in
    if prefix == Vendor.Webkit
    then style ("-webkit-" ++ name) string styles
    else style name string styles


{-| Defines a perspective view for a 3D transformed element.

  -- [ ("transform", "perspective(800)") ]
  transform3 [ perspective 800 ]
-}
perspective : number -> String
perspective p =
  "perspective(" ++ (toString p) ++ ")"


{-| Moves an element from its current position (according to the
parameters given for the X-axis and the Y-axis).

    import Css.Transform3 exposing (..)

    -- [ ("transform", "translate3d(100px, 100px, 0px)") ]
    transform3 [ translate3 100 100 0 ] []
-}
translate3 : number -> number -> number -> String
translate3 x y z =
  "translate3d(" ++ (toString x) ++ "px, " ++
  (toString y) ++ "px, " ++ (toString z) ++ "px)"


{-| Rotates the element around a specified axis at a given degree.

    import Css.Transform3 exposing (..)

    -- [ ("transform", "rotate3d(1, 1, 1, 45deg)") ]
    transform3 [ rotate3 1 1 1 45 ] []
-}
rotate3 : number -> number -> number -> number -> String
rotate3 x y z angle =
  "rotate3d(" ++ (toString x) ++ ", " ++
  (toString y) ++ ", " ++ (toString z) ++ ", " ++
  (toString angle) ++ "deg)"


{-| Scale an element along the given axis.

    import Css.Transform3 exposing (..)

    -- [ ("transform", "scale3d(1, 2, 1)") ]
    transform3 [ scale3 1 2 1 ] []
-}
scale3 : number -> number -> number -> String
scale3 x y z =
  "scale3d(" ++ (toString x) ++ ", " ++
  (toString y) ++ ", " ++ (toString z) ++ ")"