Shulou(Shulou.com)06/01 Report--

This article mainly introduces "HTML how to achieve 2D box conversion into images", in daily operation, I believe many people in HTML how to achieve 2D box conversion into images on the question of doubt, Xiaobian consulted all kinds of information, sorted out simple and easy to use operation methods, I hope to answer "HTML how to achieve 2D box conversion into images" doubts helpful! Next, please follow the small series to learn together!

CSS3 conversion

CSS3 transforms, we can move, scale, reverse, rotate, and stretch elements.

How does it work?

The effect of transformation, which causes an element to change shape, size, and position.

You can convert your elements using 2D or 3D.

browser support

Internet Explorer 10, Firefox, and Opera support the transform attribute.

Chrome and Safari require prefix-webkit-version.

Attention:? Internet Explorer 9 requires prefix-ms-version.

2D conversion

In this chapter you will learn about 2D transformation methods:

translate()

rotate()

scale()

skew()

matrix()

In the next chapter you will learn about 3D conversion.

examples

div { transform:rotate(30deg); -ms-transform:rotate(30deg); -webkit-transform:rotate(30deg); }

replication

Run it?

translate() method

Translate() method, moves from the current element position according to parameters given for left (X axis) and top (Y axis) positions.

examples

div { transform:translate(50px,100px); -ms-transform:translate(50px,100px); -webkit-transform:translate(50px,100px); }

replication

Run it?

The translate value (50px,100px) is 50 pixels shifted from the left element and 100 pixels shifted from the top.

rotate() method

rotate() method, rotates an element clockwise by a given degree. Negative values are allowed, so this rotates the element counterclockwise.

examples

div { transform:rotate(30deg); -ms-transform:rotate(30deg); -webkit-transform:rotate(30deg); }

replication

Run it?

rotate value (30deg) Element rotates 30 degrees clockwise.

scale() method

The scale() method increases or decreases the size of the element depending on the parameters of width (X axis) and height (Y axis):

examples

div { transform:scale(2,4); -ms-transform:scale(2,4); -webkit-transform:scale(2,4); }

replication

Run it?

Scale(2,4) transforms width to 2 times its original size, and height to 4 times its original size.

skew() method

The skew() method, which gives angles based on lateral (X axis) and vertical (Y axis) line parameters:

examples

div { transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); -webkit-transform:skew(30deg,20deg); }

replication

Run it?

Skew(30deg,20deg) is an element of 20 degrees and 30 degrees around the X and Y axes.

matrix() method

The matrix() method and the 2 D transform method are combined into one.

Matrix method has six parameters, including rotation, zoom, shift (pan) and tilt functions.

examples

Rotate div element by 30° using matrix() method

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); }

replication

Run it?

New transformation attribute

The following is a list of all transformation properties:

Property

described

CSS

transform

Elements suitable for 2D or 3D conversion

3

transform-origin

Allows you to change the position of conversion elements

3

2D conversion method

function

described

matrix(n,n,n,n,n,n)

Define 2 D transformation, using a matrix of six values.

translate(x,y)

Defines 2 D transformations that move elements along the X and Y axes.

translateX(n)

Defines 2 D transformations that move elements along the X axis.

translateY(n)

Defines 2 D transformations that move elements along the Y axis.

scale(x,y)

Defines 2 D scaling transformations that change the width and height of elements.

scaleX(n)

Defines 2 D scaling transformations that change the width of elements.

scaleY(n)

Defines 2 D scaling transformations that change the height of elements.

rotate(angle)

Define 2 D rotation, specify angle in parameter.

skew(x-angle,y-angle)

Defines 2D tilt transformations, along the X and Y axes.

skewX(angle)

Defines a 2D tilt transform, along the X axis.

skewY(angle)

Defines a 2D tilt transform, along the Y axis.

At this point, the study of "how to convert HTML 2D boxes into images" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.