(window.webpackJsonp=window.webpackJsonp||[]).push([[924],{1332:function(t,s,a){"use strict";a.r(s);var e=a(31),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"_2d-transforms"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2d-transforms"}},[t._v("#")]),t._v(" 2D Transforms")]),t._v(" "),a("h2",{attrs:{id:"rotate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rotate"}},[t._v("#")]),t._v(" Rotate")]),t._v(" "),a("p",[a("strong",[t._v("HTML")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("

\n\n")])])]),a("p",[a("strong",[t._v("CSS")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".skew")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" teal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("skew")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("20deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" -30deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis."),a("br"),t._v("\nThe center of the transform is in the center of the div, "),a("code",[t._v("50%")]),t._v(" from left and "),a("code",[t._v("50%")]),t._v(" from top.")]),t._v(" "),a("p",[t._v("See the result "),a("a",{attrs:{href:"https://jsfiddle.net/MadalinaTn/gtt4osms/1/",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"multiple-transforms"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-transforms"}},[t._v("#")]),t._v(" Multiple transforms")]),t._v(" "),a("p",[t._v("Multiple transforms can be applied to an element in one property like this:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("15deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("This will rotate the element 15 degrees clockwise and then translate it 200px to the right.")]),t._v(" "),a("p",[t._v("In chained transforms, "),a("strong",[t._v("the coordinate system moves with the element")]),t._v(". This means that the translation won't be horizontal but on an axis rotate 15 degrees clockwise as shown in the following image:")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://i.stack.imgur.com/Ur0RG.jpg",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://i.stack.imgur.com/Ur0RG.jpg",alt:"Multiple transforms rotate then translate"}}),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("Changing the order of the transforms will change the output. The first example will be different to")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("15deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("

\n\n")])])]),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".transform")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("15deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("As shown in this image:")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://i.stack.imgur.com/QozeC.jpg",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://i.stack.imgur.com/QozeC.jpg",alt:"Multiple transforms translate then rotate"}}),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"translate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#translate"}},[t._v("#")]),t._v(" Translate")]),t._v(" "),a("p",[a("strong",[t._v("HTML")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("

\n\n")])])]),a("p",[a("strong",[t._v("CSS")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" teal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("This example will move the div by 200px on the X axis and by "),a("code",[t._v("100px * 50% = 50px")]),t._v(" on the Y axis.")]),t._v(" "),a("p",[t._v("You can also specify translations on a single axis.")]),t._v(" "),a("p",[t._v("On the X axis:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("On the Y axis:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateY")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"transform-origin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transform-origin"}},[t._v("#")]),t._v(" Transform Origin")]),t._v(" "),a("p",[t._v("Transformations are done with respect to a point which is defined by the "),a("code",[t._v("transform-origin")]),t._v(" property.")]),t._v(" "),a("p",[t._v("The property takes 2 values : "),a("code",[t._v("transform-origin: X Y;")])]),t._v(" "),a("p",[t._v("In the following example the first div ("),a("code",[t._v(".tl")]),t._v(") is rotate around the top left corner with "),a("code",[t._v("transform-origin: 0 0;")]),t._v(" and the second ("),a("code",[t._v(".tr")]),t._v(")is transformed around it's top right corner with "),a("code",[t._v("transform-origin: 100% 0")]),t._v(". The rotation is applied "),a("strong",[t._v("on hover")]),t._v(" :")]),t._v(" "),a("p",[a("strong",[t._v("HTML:")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("

\n\n")])])]),a("p",[a("strong",[t._v("CSS:")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".transform")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inline-block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" teal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transform 1s"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".origin1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform-origin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".origin2")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform-origin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100% 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".transform:hover")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("30deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("The default value for the transform-origin property is "),a("code",[t._v("50% 50%")]),t._v(" which is the center of the element.")]),t._v(" "),a("h4",{attrs:{id:"syntax"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#syntax"}},[t._v("#")]),t._v(" Syntax")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Rotate Transform")])]),t._v(" "),a("li",[t._v("transform: rotate("),a("angle",[t._v(")")])],1),t._v(" "),a("li",[a("strong",[t._v("Translate Transform")])]),t._v(" "),a("li",[t._v("transform: translate("),a("length-or-percentage",[t._v(" [, "),a("length-or-percentage",[t._v("]?)")])],1)],1),t._v(" "),a("li",[t._v("transform: translateX("),a("length-or-percentage",[t._v(")")])],1),t._v(" "),a("li",[t._v("transform: translateY("),a("length-or-percentage",[t._v(")")])],1),t._v(" "),a("li",[a("strong",[t._v("Skew Transform")])]),t._v(" "),a("li",[t._v("transform: skew("),a("angle",[t._v(" [, "),a("angle",[t._v("]?)")])],1)],1),t._v(" "),a("li",[t._v("transform: skewX("),a("angle",[t._v(")")])],1),t._v(" "),a("li",[t._v("transform: skewY("),a("angle",[t._v(")")])],1),t._v(" "),a("li",[a("strong",[t._v("Scale Transform")])]),t._v(" "),a("li",[t._v("transform: scale("),a("scale-factor",[t._v(" [, "),a("scale-factor",[t._v("]?)")])],1)],1),t._v(" "),a("li",[t._v("transform: scaleX("),a("scale-factor",[t._v(")")])],1),t._v(" "),a("li",[t._v("transform: scaleY("),a("scale-factor",[t._v(")")])],1),t._v(" "),a("li",[a("strong",[t._v("Matrix Transform")])]),t._v(" "),a("li",[t._v("transform: matrix("),a("number",[t._v(" [, "),a("number",[t._v(" ]{5,5})")])],1)],1)]),t._v(" "),a("h4",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Function/Parameter")]),t._v(" "),a("th",[t._v("Details")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("rotate(x)")])]),t._v(" "),a("td",[t._v("Defines a transformation that moves the element around a fixed point on the Z axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("translate(x,y)")])]),t._v(" "),a("td",[t._v("Moves the position of the element on the X and Y axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("translateX(x)")])]),t._v(" "),a("td",[t._v("Moves the position of the element on the X axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("translateY(y)")])]),t._v(" "),a("td",[t._v("Moves the position of the element on the Y axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("scale(x,y)")])]),t._v(" "),a("td",[t._v("Modifies the size of the element on the X and Y axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("scaleX(x)")])]),t._v(" "),a("td",[t._v("Modifies the size of the element on the X axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("scaleY(y)")])]),t._v(" "),a("td",[t._v("Modifies the size of the element on the Y axis")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("skew(x,y)")])]),t._v(" "),a("td",[t._v("Shear mapping, or transvection, distorting each point of an element by a certain angle in each direction")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("skewX(x)")])]),t._v(" "),a("td",[t._v("Horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("skewY(y)")])]),t._v(" "),a("td",[t._v("Vertical shear mapping distorting each point of an element by a certain angle in the vertical direction")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("matrix()")])]),t._v(" "),a("td",[t._v("Defines a 2D transformation in the form of a transformation matrix.")])]),t._v(" "),a("tr",[a("td",[t._v("angle")]),t._v(" "),a("td",[t._v("The angle by which the element should be rotated or skewed (depending on the function with which it is used). Angle can be provided in degrees ("),a("code",[t._v("deg")]),t._v("), gradians ("),a("code",[t._v("grad")]),t._v("), radians ("),a("code",[t._v("rad")]),t._v(") or turns ("),a("code",[t._v("turn")]),t._v("). In "),a("code",[t._v("skew()")]),t._v(" function, the second angle is optional. If not provided, there will be no (0) skew in Y-axis.")])]),t._v(" "),a("tr",[a("td",[t._v("length-or-percentage")]),t._v(" "),a("td",[t._v("The distance expressed as a length or a percentage by which the element should be translated. In "),a("code",[t._v("translate()")]),t._v(" function, the second length-or-percentage is optional. If not provided, then there would be no (0) translation in Y-axis.")])]),t._v(" "),a("tr",[a("td",[t._v("scale-factor")]),t._v(" "),a("td",[t._v("A number which defines how many times the element should be scaled in the specified axis. In "),a("code",[t._v("scale()")]),t._v(" function, the second scale-factor is optional. If not provided, the first scale-factor will be applied for Y-axis also.")])])])]),t._v(" "),a("h4",{attrs:{id:"remarks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remarks"}},[t._v("#")]),t._v(" Remarks")]),t._v(" "),a("h3",{attrs:{id:"_2d-coordiante-system"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2d-coordiante-system"}},[t._v("#")]),t._v(" 2D Coordiante system")]),t._v(" "),a("p",[t._v("Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left and the Y axis goes downwards as shown in the following image:")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://i.stack.imgur.com/epKMy.jpg",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://i.stack.imgur.com/epKMy.jpg",alt:"2D CSS coordinate system"}}),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("So a positive "),a("code",[t._v("translateY()")]),t._v(" goes downwards and a positive "),a("code",[t._v("translateX()")]),t._v(" goes right.")]),t._v(" "),a("h3",{attrs:{id:"browser-support-and-prefixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#browser-support-and-prefixes"}},[t._v("#")]),t._v(" Browser support and prefixes")]),t._v(" "),a("ul",[a("li",[t._v("IE supports this property since IE9 with the "),a("code",[t._v("-ms-")]),t._v(" prefix. Older versions and Edge don't need the prefix")]),t._v(" "),a("li",[t._v("Firefox supports it since version 3.5 and needs the "),a("code",[t._v("-moz-")]),t._v(" prefix until version 15")]),t._v(" "),a("li",[t._v("Chrome since version 4 and until version 34 needs the "),a("code",[t._v("-webkit-")]),t._v(" prefix")]),t._v(" "),a("li",[t._v("Safari needs the "),a("code",[t._v("-webkit-")]),t._v(" prefix until version 8")]),t._v(" "),a("li",[t._v("Opera needs the "),a("code",[t._v("-o-")]),t._v(" prefix for version 11.5 and the "),a("code",[t._v("-webkit-")]),t._v(" prefix from version 15 to 22")]),t._v(" "),a("li",[t._v("Android needs the "),a("code",[t._v("-webkit-")]),t._v(" prefix from version 2.1 to 4.4.4")])]),t._v(" "),a("h3",{attrs:{id:"example-of-prefixed-transform"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example-of-prefixed-transform"}},[t._v("#")]),t._v(" Example of prefixed transform:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("45deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-ms-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("45deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("45deg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);