第24章 CSS3变形效果[上]

最新推荐文章于 2025-04-24 00:46:33 发布

最新推荐文章于 2025-04-24 00:46:33 发布 · 126 阅读

阅-H5 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了CSS3中div元素的变形效果实现方法，包括平移、缩放、旋转及倾斜等基本操作，并展示了如何使用transform属性组合这些效果。此外，还介绍了transform-origin属性的应用，以调整变形的原点。

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3变形效果[上]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>我是HTML5</div>
111

</body>
</html>

style.css

@charset "utf-8";

body {
	margin: 100px;
}

div {
	width: 200px;
	height: 200px;
	background-color: green;
	box-shadow: 2px 2px 2px gray;

	/*平移*/
	/*transform: translate(200px, 200px);*/
	/*transform: translate(0, 200px);*/
	/*transform: translateX(200px);*/
	/*transform: translateY(200px);*/

	/*缩放*/
	/*transform: scale(1.5);*/
	/*transform: scale(0.5);*/
	/*transform: scale(1.5, 2.0);*/
	/*transform: scaleX(0.5);*/
	/*transform: scaleY(0.5);*/

	/*旋转*/
	/*transform: rotate(-45deg);*/

	/*倾斜*/
	/*transform: skew(45deg, 20deg);*/
	/*transform: skewX(45deg);*/
	/*transform: skewY(45deg);*/

	/*通过六个值自定义矩形*/
	/*transform: matrix(1, 0, 0, 1, 30, 30);*/

	/*多个属性值空格隔开*/
	/*transform: rotate(45deg) scale(1.5);*/

	transform: rotate(45deg);

	/*transform-origin: center center;*/
	/*transform-origin: 50% 50%;*/

	/*transform-origin: left top;*/
	transform-origin: 0 0;
}

效果图：