css3 2D转换

最新推荐文章于 2024-06-01 21:04:53 发布

止于心～

最新推荐文章于 2024-06-01 21:04:53 发布

阅读量31

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/LiuHB_/article/details/133063927

版权

css3中2D转换在前端用得很频繁，它可以对元素进行移动、缩放、转动、拉长或拉伸(平面)
2D效果可以让某个元素改变形状，大小和位置

新转换属性:

transform：该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等
transform-origin：属性允许您更改转换元素的位置

transform

2D变换的方法：
- translate()
- rotate()
- scale()
- skew()
- matrix()

1.translate()位移

根据左(X轴,向右为正方向)和顶部(Y轴，向下为正方向)位置给定的参数，从当前元素位置移动

translate(x,y)
translateX()
translateY()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<input class="button" type="button" value="按钮">
		<div class="box1"></div>
	</body>
	<script>
		var button = document.querySelector(".button");
		var box1 = document.querySelector(".box1");
		button.onclick = function(){
			box1.style.transform = "translate(100px,100px)";
		}
	</script>
</html>

css3 translate位移

2.rotate()旋转

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<input class="button" type="button" value="按钮">
		<div class="box1"></div>
	</body>
	<script>
		var button = document.querySelector(".button");
		var box1 = document.querySelector(".box1");
		button.onclick = function(){
			box1.style.transform = "rotate(45deg)";
		}
	</script>
</html>

css3 rotate旋转

3.scale()缩放

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

scale(x,y)
scaleX()
scaleY()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				background-color: pink;
				transition: all 1s linear;
			}
		</style>
	</head>
	<body>
		<input class="button" type="button" value="按钮">
		<div class="box1"></div>
	</body>
	<script>
		var button = document.querySelector(".button");
		var box1 = document.querySelector(".box1");
		button.onclick = function(){
			box1.style.transform = "scale(0.5)";
		}
	</script>
</html>

scale

scale值可以为负数，则可以理解为左右对调，上下对调，方向反向增加或减少

css3 scale值为负数

4.skew()拉伸

skewX();表示只在X轴(水平方向)倾斜，值为负数则反向
skewY();表示只在Y轴(垂直方向)倾斜，值为负数则反向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				background-color: pink;
				transition: all 1s linear;
				/* transform: skewY(45deg); */
			}
		</style>
	</head>
	<body>
		<input class="button" type="button" value="按钮">
		<div class="box1">王哥最帅</div>
	</body>
	<script>
		var button = document.querySelector(".button");
		var box1 = document.querySelector(".box1");
		button.onclick = function(){
			box1.style.transform = "skewX(30deg)";
		}
	</script>
</html>

css3 skewX

	box1.style.transform = "skewY(30deg)";

css3 skewY

5.matrix()矩阵

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移)

transform-origin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				background-color: pink;
				transform-origin: 0% 0%;
				transition: all 1s linear;
			}
		</style>
	</head>
	<body>
		<input class="button" type="button" value="按钮">
		<div class="box1">王哥最帅</div>
	</body>
	<script>
		var button = document.querySelector(".button");
		var box1 = document.querySelector(".box1");
		button.onclick = function(){
			box1.style.transform = "rotate(30deg)";
		}
	</script>
</html>