Home > Article > Web Front-end > What properties does css3 transformation have?

What properties does css3 transformation have?

青灯夜游Original: 2022-01-13 14:12:381593browse

There are 6 css3 transformation attributes: 1. transform; 2. transform-origin; 3. transform-style; 4. perspective; 5. perspective-origin; 6. backface-visibility.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 transformations can move, scale, rotate, lengthen or stretch elements.

What properties does css3 transformation have?

css3 conversion properties (2D/3D conversion)

##PropertiesDescriptionCSStransformElements suitable for 2D or 3D transformation3transform-originAllows you to change the transform element position3transform-style3D Specify how to nest elements in space3perspectiveSpecify how 3D elements are viewed in perspective3perspective-originSpecify the bottom position of the 3D element3backface-visibilityDefines whether an element should be visible when not facing the screen3

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 转换</div>
	   <div id="rotate3D">3D 转换</div>
    </body>
</html>

What properties does css3 transformation have?

Expand knowledge:

2D conversion method

FunctionDescription matrix(Define 2D transformation, using a matrix of six values. translate(Define a 2D transform that moves elements along the X and Y axes. translateX(Define a 2D transformation that moves elements along the X-axis. translateY(Define a 2D transformation that moves elements along the Y axis. scale(Define a 2D scaling transformation that changes the width and height of an element. scaleX(Define a 2D scaling transformation that changes the width of an element. scaleY(Define 2D scaling transformation to change the height of the element. rotate(Define 2D rotation, specify the angle in the parameter. skew(Define 2D skew transformation, along X and Y axis. skewX( Defines a 2D skew transformation, along the X-axis. skewY(Defines a 2D skew transformation, along the Y axis.


n,n,n,n,n ,n)
x,y)
n)
n)
x,y)
n)
n)
angle)
x-angle,y-angle)
angle)
angle)

3D Conversion Method

FunctionDescriptionmatrix3d(Define 3D transformation, using 16 values 4x4 matrix. translate3d(Define 3D transformation. translateX(Define a 3D translation, using only the values used for the X-axis. translateY(Define a 3D translation, using only the values used for the Y axis. translateZ(Define a 3D translation, using only the value used for the Z axis. scale3d(Define the 3D scaling transformation. scaleX(Defines a 3D scaling transformation, given an X-axis value. scaleY(Define the 3D scaling transformation by giving a Y-axis value. scaleZ(Defines a 3D scaling transformation, given a Z-axis value. rotate3d(Define 3D rotation. rotateX(Defines a 3D rotation along the X-axis. rotateY(Defines a 3D rotation along the Y axis. rotateZ(Defines a 3D rotation along the Z axis. perspective( Defines the perspective view of a 3D transformed element.


n,n,n,n,n,n, n,n,n,n,n,n ,n,n,n,n)
x,y,z)
x)
y)
z)
x,y,z)
x)
y)
z)
x,y,z,angle)
angle)
angle)
angle)
n)

(Learning video sharing:

css video tutorial)

The above is the detailed content of What properties does css3 transformation have?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the ways to control the hiding of elements in css3Next article：What are the ways to control the hiding of elements in css3

See more

What properties does css3 transformation have?

Related articles