Elegant.Transform

Transform contains everything about css transformations : translate, rotate and scale.

Types


type alias Transform =

{ translate : Elegant.Transform.Triplet (Maybe.Maybe Elegant.Helpers.Shared.SizeUnit), rotate : Elegant.Transform.Triplet (Maybe.Maybe Elegant.Helpers.Shared.Angle), origin : Maybe.Maybe (Elegant.Transform.Triplet Elegant.Helpers.Shared.SizeUnit), backfaceVisibility : Maybe.Maybe Elegant.Transform.BackfaceVisibility, transformStyle : Maybe.Maybe Elegant.Transform.TransformStyle, perspective : Maybe.Maybe Elegant.Helpers.Shared.SizeUnit, perspectiveOrigin : Maybe.Maybe ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ) }

The Transform record contains everything about transformations. You probably won't use it as is, but instead using Box.transform which automatically generate an empty Transform record. You can then use modifiers. I.E.

Box.transform
    [ Transform.translateX (px 30)
    , Transform.translateY (vw 30)
    ]

Default transform


default : Elegant.Transform.Transform

Generate an empty Translate record, with every field equal to Nothing. You are free to use it as you wish, but it is instanciated automatically by Box.translate.


Shadow modifiers


translateX : Elegant.Helpers.Shared.SizeUnit -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the translateX of the Transform.



translateY : Elegant.Helpers.Shared.SizeUnit -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the translateY of the Transform.



translateZ : Elegant.Helpers.Shared.SizeUnit -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the translateZ of the Transform.



rotateX : Elegant.Helpers.Shared.Angle -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the rotateX of the Transform.



rotateY : Elegant.Helpers.Shared.Angle -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the rotateY of the Transform.



rotateZ : Elegant.Helpers.Shared.Angle -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Set the translateZ of the Transform.



origin : ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ) -> Modifiers.Modifier Elegant.Transform.Transform

Set the origin of the Transform.



backfaceVisibilityHidden : Elegant.Transform.Transform -> Elegant.Transform.Transform

in a (css) 3d rendered scene, we hide back facing elements.



backfaceVisibilityVisible : Elegant.Transform.Transform -> Elegant.Transform.Transform

in a (css) 3d rendered scene, we show back facing elements.



preserve3d : Elegant.Transform.Transform -> Elegant.Transform.Transform

in a (css) 3d rendered scene, we hide back facing elements.



perspective : Elegant.Helpers.Shared.SizeUnit -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Change the perspective of a scene. It represents the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.



perspectiveOrigin : ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ) -> Elegant.Transform.Transform -> Elegant.Transform.Transform

Define the origin of the perspective of a scene. It represents the position at which the viewer is looking. It is used as the vanishing point by the perspective property.


Compilation


transformToCouples : Elegant.Transform.Transform -> List.List ( String.String, String.String )

Compiles a Transform record to the corresponding CSS tuple. Compiles only parts which are defined, ignoring Nothing fields.