Home  >  Article  >  Web Front-end  >  2D Transforms in CSS3

2D Transforms in CSS3

WBOY
WBOYforward
2023-09-10 23:05:05640browse

CSS3 中的 2D 变换

2D transformations are used to re-alter the structure of elements through translation, rotation, scaling and skewing.

The following table contains commonly used values ​​​​in 2D transformation

2345##scale(x,y)6scaleX(n)7 Rotate elements based on angle##skewX(angle)##skewY(angle)
Serial number

Value and description

1

##matrix(n,n,n,n,n,n ) is used to define a matrix transformation with six values

translate(x,y) Used to translate elements on the x-axis and y-axis

translateX(n) Used to translate elements on the x-axis

translateY(n) Used to translate elements on the y-axis

is used to change the width and height of the element

is used to change the width of the element

##scaleY(n)

is used to change The height of the element

##8

##rotate(angle)

9

Define the skew transformation along the x-axis

##10

Define the oblique transformation along the y-axis

The above is the detailed content of 2D Transforms in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete