【无标题】

hmt13657

已于 2024-01-01 14:42:05 修改

阅读量18

点赞数

文章标签： css css3 html5

于 2023-09-24 21:16:55 首次发布

本文链接：https://blog.csdn.net/hmt13657/article/details/133252553

版权

本文介绍了如何使用CSS的transform属性进行2D转换，如translate移动、rotate旋转、scale缩放、skew倾斜和matrix组合变换，以及如何在JavaScript中控制元素的这些变换效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: pink;
				font-size: 30px;
				transition: 1s;
				margin: 200px auto 0 auto;
				/* transform: translate(0px,0px); */
			}
			.box2 {
				width: 200px;
				height: 200px;
				background-color: orange;
				font-size: 30px;
				transition: 1s;
				margin: 0 auto;
				/* transform: translate(0px,0px); */
			}
		</style>
	</head>
	<body>
		<!-- 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。
		正数顺时针方向，反而负值就是逆时针
		单独设置某一个轴值，只会作用最后一个
		基本语法transform
		transform-origin  设置旋转的中心点
		
		 translate(X,Y)
		translateX(X)
		translateY(Y)
		translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
		 
		 rotate()
		 rotate(角度deg)方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
		 rotateX()rotateY()
		 
		 scale(宽度倍数,高度倍数)
		 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
		scaleX(宽度倍数)   scaleY(高度倍数)
		 
		 skew(X,Y)
		 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，
		 则默认为0，参数为负表示向相反方向倾斜。
		 skewX(X)   		 skewY(Y)
		 
		 matrix()
		matrix(宽度缩放,Y倾斜,X倾斜,高度缩放,X平移,Y平移)方法和2D变换方法合并成一个。
		  
		  matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。-->
		 <button type="button" onclick="func1()">按钮1</button>
		 <button type="button" onclick="func2()">按钮2</button>
		 <div class="box1">123123123</div>
		 <div class="box2">123123123</div>
	</body>
	<script type="text/javascript">
		var box1 = document.getElementsByClassName("box1")[0];
		function func1(){
			// box1.style.transform = "translate(200px,200px)";
			// box1.style.transform = "translateX(300px)";
			// box1.style.transform = "translateY(100px)";
			// box1.style.transform = "rotate(30deg)";
			// box1.style.transform = "rotateX(30deg)";
			// box1.style.transform = "rotateY(60deg)";
			// box1.style.transform = "scale(0.5,1)";
			// box1.style.transform = "skew(30deg,90deg)";
			// box1.style.transform = "matrix(1,0,0,1,0,1)";
			box1.style.transform = "rotate(30deg)";
			box1.style.transformOrigin = "150% 0%";
		}
		function func2(){
			// box1.style.transform = "translate(0px,0px)";
			// box1.style.transform = "translateX(0px)";
			// box1.style.transform = "translateY(300px)";
			// box1.style.transform = "rotateY(90deg)";
			// box1.style.transform = "scale(1,1)";
			box1.style.transform = "skew(90deg,60deg)";
		}
	</script>
</html>