Transform - mateuszkocz/3l GitHub Wiki

Transform

2D and 3D transformation of an object.

You can use classes dedicated to specifics transformation, but if you plan to use multiple transformation on an object, use general classes .transform or .transform3d instead. Otherwise the latter transform will override the former. If you want to use some of the 3D transformations, use .transform3d class. It has a 3D specific property transform-style included. You can put both 3D and 2D transformations in .transform3D.

Transforms don't affect an object's place in a document and its environment so there's no risk of crashing a layout.

Transformations characteristics:

  • Rotate takes one argument and rotate object clockwise by specified angle (in deg).

  • Scale takes one or two arguments (x,y). If y is not specified it is assumed that x = y. Arguments in interval (0,1) shrink the object. Arguments >1 makes it bigger.

  • Skew takes one or two arguments (x,y). If y is not specified it is assumed that y = 0 (no y-skew). Arguments must be in deg.

  • Translate takes one or two arguments (w,y). If y is not specified it is assumed y = 0 (no y-translate). Arguments are in px or em. Translate moves the object by specified value.

Sometimes you might want to control the point that is the relative base of transformations. For that reason use .transform-origin class. That class takes one or two values. First value defines horizontal position of that point, second refers to vertical position. In case you provide only the first value, the second is set to 50%. Default value is (50% 50%).

You can use three types of values:

  • pixels that place origin point in position according to the top-left corner of an element to its bottom-right corner. Negative values allowed - in that case position goes to the left and top from the top-left corner,

  • percentages that are relative to object's width and height. As in px, the original position is top-left corner (0% 0%), and goes to bottom-right (100% 100%). Negative values does the same as in px.

  • keywords: left / center / right for x-axis and top / center / bottom for y-axis.

For 3D transformations you can set a perspective using .perspective() class and putting value in brackets .

Browsers support: IE9+, Fx3,5+, Chrome, Safari, Opera, Opera Mobile, Android Browser Notable lack of support: IE8-*, Opera MiniYou can use some of the transformation in older IE through filter property. To generate that property refer to -> http://css3please.com. You can also emulate scale property with zoom property.

Examples:

  1. .scale(2,.5) // Stretch an object two times and shrink in height by half.

  2. .rotate(180deg) // Rotate an object by 180deg.

  3. .transform(.scale(2,.5),rotate(180deg)) // Does the combined transformation from examples above.

  4. .transform-origin(20% top) // Place the transformation origin at the top, 20% of the object's width to the right from the top-left corner.

Code

.transform-origin (@arguments) {
	-webkit-transform-origin: @arguments;
	-moz-transform-origin: @arguments;
	-ms-transform-origin: @arguments;
	-o-transform-origin: @arguments;
	transform-origin: @arguments;
	}
.perspective (@arguments) {
	-webkit-perspective: @arguments;
	-moz-perspective: @arguments;
	-ms-perspective: @arguments;
	-o-perspective: @arguments;
	perspective: @arguments;
	}
.transform (@arguments) {
	-webkit-transform: @arguments;
	-moz-transform: @arguments;
	-ms-transform: @arguments;
	-o-transform: @arguments;
	transform: @arguments;
	}
.transform3d (@arguments) {
	-webkit-transform: @arguments;
	-webkit-transform-style: preserve-3d;
	-moz-transform: @arguments;
	-moz-transform-style: preserve-3d;
	-ms-transform: @arguments;
	-ms-transform-style: preserve-3d;
	-o-transform: @arguments;
	-o-transform-style: preserve-3d;
	transform: @arguments;
	transform-style: preserve-3d;
}
.rotate (@arguments) {
	-webkit-transform: rotate(@arguments);
	-moz-transform: rotate(@arguments);
	-ms-transform: rotate(@arguments);
	-o-transform: rotate(@arguments);
	transform: rotate(@arguments);
	}
.rotate3d (@deg1, @deg2:0, @deg3:0){
	-webkit-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
	-webkit-transform-style: preserve-3d;
	-moz-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
	-moz-transform-style: preserve-3d;
	-ms-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
	-ms-transform-style: preserve-3d;
	-o-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
	-o-transform-style: preserve-3d;
	transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
	transform-style: preserve-3d;
	}
.scale (@arguments) {
	-webkit-transform: scale(@arguments);
	-moz-transform: scale(@arguments);
	-ms-transform: scale(@arguments);
	-o-transform: scale(@arguments);
	transform: scale(@arguments);
	}
.scale (@argument1,@argument2) {
	-webkit-transform: scale(@argument1,@argument2);
	-moz-transform: scale(@argument1,@argument2);
	-ms-transform: scale(@argument1,@argument2);
	-o-transform: scale(@argument1,@argument2);
	transform: scale(@argument1,@argument2);
	}
.scaleX (@arguments) {
	-webkit-transform: scaleX(@arguments);
	-moz-transform: scaleX(@arguments);
	-ms-transform: scaleX(@arguments);
	-o-transform: scaleX(@arguments);
	transform: scaleX(@arguments);
	}
.scaleY (@arguments) {
	-webkit-transform: scaleY(@arguments);
	-moz-transform: scaleY(@arguments);
	-ms-transform: scaleY(@arguments);
	-o-transform: scaleY(@arguments);
	transform: scaleY(@arguments);
	}
.skew (@arguments) {
	-webkit-transform: skew(@arguments);
	-moz-transform: skew(@arguments);
	-ms-transform: skew(@arguments);
	-o-transform: skew(@arguments);
	transform: skew(@arguments);
	}
.skew (@argument1, @argument2) {
	-webkit-transform: skew(@argument1, @argument2);
	-moz-transform: skew(@argument1, @argument2);
	-ms-transform: skew(@argument1, @argument2);
	-o-transform: skew(@argument1, @argument2);
	transform: skew(@argument1, @argument2);
	}
.skewX (@arguments) {
	-webkit-transform: skewX(@arguments);
	-moz-transform: skewX(@arguments);
	-ms-transform: skewX(@arguments);
	-o-transform: skewX(@arguments);
	transform: skewX(@arguments);
	}
.skewY (@arguments) {
	-webkit-transform: skewY(@arguments);
	-moz-transform: skewY(@arguments);
	-ms-transform: skewY(@arguments);
	-o-transform: skewY(@arguments);
	transform: skewY(@arguments);
	}
.translate (@arguments) {
	-webkit-transform: translate(@arguments);
	-moz-transform: translate(@arguments);
	-ms-transform: translate(@arguments);
	-o-transform: translate(@arguments);
	transform: translate(@arguments);
	}
.translate (@argument1, @argument2) {
	-webkit-transform: translate(@argument1, @argument2);
	-moz-transform: translate(@argument1, @argument2);
	-ms-transform: translate(@argument1, @argument2);
	-o-transform: translate(@argument1, @argument2);
	transform: translate(@argument1, @argument2);
	}
.translateX (@arguments) {
	-webkit-transform: translateX(@arguments);
	-moz-transform: translateX(@arguments);
	-ms-transform: translateX(@arguments);
	-o-transform: translateX(@arguments);
	transform: translateX(@arguments);
	}
.translateY (@arguments) {
	-webkit-transform: translateY(@arguments);
	-moz-transform: translateY(@arguments);
	-ms-transform: translateY(@arguments);
	-o-transform: translateY(@arguments);
	transform: translateY(@arguments);
	}