CSS3 the transition to getting Started

CSS3 the transition to getting Started

1, CSS3 conversion 1.1, what is the conversion, what effect can be achieved?

Transformations are an effect of changing the shape, size, and position of an element, and the main effect is as follows:

1. Move
2. Scaling
3. Turn
4. Elongated
5. Stretch

1.2. Browser compatible

The conversion properties of CSS3 transform , Ie10+,firefox,chrome,opera,safari and other modern browsers support transform attributes, IE9 require-ms-prefixes.

2, 2D conversion

Preparatory work:

<style>  .container{    position:relative;border:1px solid red; width: 100px; height: 100px;  }  .container>div{    width: 50px; height: 50px; background: gray;  }</style>

2.1, translate ()--Mobile

Translate (/*x coordinate shift */left,/*y coordinate shift */top)

Move right 20px down 20px move left 20px, move down 20px 2.2, rotate ()--Rotate

Rotate (/* Rotation angle */deg)

Rotate 135 degrees 2.3, scale ()--Zoom

Scale (/* Width scaling */widthscale,/* Height scale */heightscale)

Zoom to 0.5 times zoom to 1.5 times times, height to 0.25 times times 2.4, skew ()--tilt

Skew (/*x axis tilt angle */xdeg,/*y axis tilt angle */ydeg)

X-axis Flip 30 degrees X axis Flip 30 degrees, y-axis flipped 10 degrees 2.5, matrix ()--matrix

Rotation 30 Degree 2.6 Transform method

function	Description
Matrix (n,n,n,n,n,n)	Defines a 2D conversion, using a matrix of six values.
Translate (x,y)	Defines 2D transformations, moving elements along the X and Y axes.
TranslateX (n)	Define 2D transformations and move elements along the X-axis.
Translatey (n)	Defines a 2D transformation that moves elements along the Y axis.
Scale (x,y)	Defines the 2D scaling transformation, changing the width and height of the element.
ScaleX (n)	Defines the 2D scaling transformation, changing the width of the element.
ScaleY (n)	Defines the 2D scaling transformation, changing the height of the element.
Rotate (angle)	Defines the 2D rotation, which specifies the angle in the parameter.
Skew (x-angle,y-angle)	Defines a 2D tilt transition along the X and Y axes.
SKEWX (angle)	Defines a 2D tilt transition along the X axis.
Skewy (angle)	Defines a 2D tilt transition along the Y axis.

3, 3D conversion 3.1, Rotatex, Rotatey

<div class="container">  <div style="transform: rotateY(0deg)" id="fun2"></div></div><script>  function fun2 (element) {  var i = 0;  var interval = setInterval(function(){    element.style.transform = ‘rotateY(‘ + i + ‘deg)‘;    i++;  }, 5);}fun2(document.getElementById(‘fun2‘));</script>

3.2. Transform method

function	Description
Matrix3D (n,n,n,n,n,N, n,n,n,n,n,N,n,n,n ,n)	Defines a 3D conversion, using a 4x4 matrix of 16 values.
Translate3d (x,y,z)	Define 3D conversions.
TranslateX (x)	Define 3D conversions, using only the values used for the X-axis.
Translatey (y)	Define 3D conversions, using only the values used for the Y-axis.
Translatez (z)	Define 3D conversions, using only the values used for the Z-axis.
Scale3d (x,y,z)	Defines a 3D scaling transformation.
ScaleX (x)	Defines a 3D scaling transformation by giving the value of an X-axis.
ScaleY (y)	Defines a 3D scaling transformation by giving the value of a Y-axis.
Scalez (z)	Defines a 3D scaling transformation by giving the value of a Z-axis.
Rotate3d (x,y,z,angle)	Defines the 3D rotation.
Rotatex (angle)	Defines a 3D rotation along the X-axis.
Rotatey (angle)	Defines a 3D rotation along the Y-axis.
Rotatez (angle)	Defines a 3D rotation along the Z-axis.
Perspective (n)	Defines a perspective view of the 3D transformation element.

CSS3 the transition to getting Started