How to achieve 2d transformation in css3-Front-end Q&A-php.cn

How to achieve 2d transformation in css3

青灯夜游

Release： 2022-03-18 17:13:16

Original

1667 people have browsed it

In CSS3, you can use the transform attribute with functions such as translate(), scale(), rotate(), skew(), skewX(), skewY() to achieve 2D transformation of elements and rotate the elements. , zoom, move, tilt, etc.

How to achieve 2d transformation in css3

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

In CSS3, you can use the transform attribute to achieve 2D transformation.

TheTransform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, tilt, etc. the element.

The function of transform attribute to implement 2d transformation

Value	Description
matrix(n,n,n,n,n,n )	Define 2D transformation, using a matrix of six values.
translate(x,y)	Define 2D transformation.
translateX(x)	Define the transformation, just using the X-axis value.
translateY(y)	Define the transformation, just using the Y-axis value.
scale(x[,y]?)	Define 2D scaling transformation.
scaleX(x)	Defines the scaling transformation by setting the value of the X axis.
scaleY(y)	Defines the scaling transformation by setting the value of the Y axis.
rotate(angle)	Define 2D rotation, specify the angle in the parameter.
skew(x-angle,y-angle)	Define the 2D skew along the X and Y axes Convert.
skewX(angle)	Define the 2D skew transformation along the X-axis.
skewY(angle)	Define the 2D skew transformation along the Y axis.

Example:

<!DOCTYPE html>
<html>
	<head>
		<style>
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}

			body {
				background: #F5F3F4;
				margin: 0;
				padding: 10px;
				font-family: &#39;Open Sans&#39;, sans-serif;
				text-align: center;
			}

			h2,
			h4 {
				font-weight: 400;
				color: #4d4d4d;
			}

			.card {
				display: inline-block;
				margin: 10px;
				background: #fff;
				padding: 10px;
				min-width: 180px;
				box-shadow: 0 3px 5px #ddd;
				color: #555;
			}

			.card .box {
				width: 60px;
				height: 60px;
				margin: auto;
				background: #ddd;
				cursor: pointer;
				box-shadow: 0 0 5px #ccc inset;
			}

			.card .box .fill {
				width: 60px;
				height: 60px;
				position: relative;
				background: #03A9F4;
				opacity: .5;
				box-shadow: 0 0 5px #ccc;
				-webkit-transition: 0.3s;
				transition: 0.3s;
			}

			.card p {
				margin: 25px 0 0;
			}

			.rotate:hover .fill {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.scale:hover .fill {
				-webkit-transform: scale(2, 2);
				transform: scale(2, 2);
			}

			.scaleX:hover .fill {
				-webkit-transform: scaleX(2);
				transform: scaleX(2);
			}

			.scaleY:hover .fill {
				-webkit-transform: scaleY(2);
				transform: scaleY(2);
			}

			.skew:hover .fill {
				-webkit-transform: skew(45deg, 45deg);
				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
				-webkit-transform: skewX(45deg);
				transform: skewX(45deg);
			}

			.skewY:hover .fill {
				-webkit-transform: skewY(45deg);
				transform: skewY(45deg);
			}

			.translate:hover .fill {
				-webkit-transform: translate(45px, 1em);
				transform: translate(45px, 1em);
			}

			.translateX:hover .fill {
				-webkit-transform: translateX(45px);
				transform: translateX(45px);
			}

			.translateY:hover .fill {
				-webkit-transform: translateY(45px);
				transform: translateY(45px);
			}

			.matrix:hover .fill {
				-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
				transform: matrix(2, 2, 0, 2, 45, 0);
			}
		</style>
	</head>
	<body>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>rotate(45deg) </p>
		</div>
		<!-- scale-->
		<div class="card">
			<div class="box scale">
				<div class="fill"></div>
			</div>
			<p>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill"></div>
			</div>
			<p>scaleX(2) </p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill"></div>
			</div>
			<p>scaleY(2) </p>
		</div>
		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>
		<!-- translate-->
		<div class="card">
			<div class="box translate">
				<div class="fill"></div>
			</div>
			<p>translate(45px) </p>
		</div>
		<div class="card">
			<div class="box translateX">
				<div class="fill"></div>
			</div>
			<p>translateX(45px)</p>
		</div>
		<div class="card">
			<div class="box translateY">
				<div class="fill"></div>
			</div>
			<p>translateY(45px)</p>
		</div>
		<div class="card">
			<div class="box matrix">
				<div class="fill"></div>
			</div>
			<p> matrix(2, 2, 0, 2, 45, 0)</p>
		</div>
	</body>
</html>

Copy after login

How to achieve 2d transformation in css3

(Learning video sharing: css video tutorial , web front end)

The above is the detailed content of How to achieve 2d transformation in css3. For more information, please follow other related articles on the PHP Chinese website!