Transform contains everything about css transformations : translate, rotate and scale.
{ translate : Triplet (Maybe Elegant.Helpers.Shared.SizeUnit)
, rotate : Triplet (Maybe Elegant.Helpers.Shared.Angle)
, origin : Maybe (Triplet Elegant.Helpers.Shared.SizeUnit)
, backfaceVisibility : Maybe BackfaceVisibility
, transformStyle : Maybe TransformStyle
, perspective : Maybe Elegant.Helpers.Shared.SizeUnit
, perspectiveOrigin : 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
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
.
translateX : Elegant.Helpers.Shared.SizeUnit -> Transform -> Transform
Set the translateX of the Transform.
translateY : Elegant.Helpers.Shared.SizeUnit -> Transform -> Transform
Set the translateY of the Transform.
translateZ : Elegant.Helpers.Shared.SizeUnit -> Transform -> Transform
Set the translateZ of the Transform.
rotateX : Elegant.Helpers.Shared.Angle -> Transform -> Transform
Set the rotateX of the Transform.
rotateY : Elegant.Helpers.Shared.Angle -> Transform -> Transform
Set the rotateY of the Transform.
rotateZ : Elegant.Helpers.Shared.Angle -> Transform -> Transform
Set the translateZ of the Transform.
origin : ( Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit, Elegant.Helpers.Shared.SizeUnit ) -> Modifiers.Modifier Transform
Set the origin of the Transform.
backfaceVisibilityHidden : Transform -> Transform
in a (css) 3d rendered scene, we hide back facing elements.
backfaceVisibilityVisible : Transform -> Transform
in a (css) 3d rendered scene, we show back facing elements.
preserve3d : Transform -> Transform
in a (css) 3d rendered scene, we hide back facing elements.
perspective : Elegant.Helpers.Shared.SizeUnit -> 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 ) -> 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.
transformToCouples : Transform -> List ( String, String )
Compiles a Transform
record to the corresponding CSS tuple.
Compiles only parts which are defined, ignoring Nothing
fields.