设置or获取 css3旋转变形缩放操作

最新推荐文章于 2024-07-11 10:41:40 发布

陆康永

最新推荐文章于 2024-07-11 10:41:40 发布

阅读量808

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaomogg/article/details/65028805

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
window.onload = function(){
	var div = document.querySelector('#div');
	console.log(getComputedStyle(div)["transform"]);
};
</script>

一开始我们都可能这样使用，但发现然并卵，获取到的值是一个矩阵方程函数 matrix3d(0.866025403784439, 0, -0.5, 0, 0, 1, 0, 0, 0.5, 0, 0.866025403784439, 0, 0, 0, 0, 1)

虽然我们css可以操作scale translate 这些封装好的函数，但实际底层操作的还是矩阵方程，当前js并没有提供相应的函数

下面我们实现一个设置和获取对应css函数的js方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	margin: 30px auto;
	-webkit-perspective: 300px;
	perspective: 300px;
} 
#div {
	width: 100px;
	height: 100px;
	background: red;
}
</style>
<script type="text/javascript" src="m.Tween.js"></script>
<script type="text/javascript">
/* 
在js中没有办法 通过计算后样式 获取到 transform中的相关操作，只能获取到矩阵

关于 transform的所有操作，我们都通过cssTransform来进行操作，
然后在 cssTransform 中来记录 对transform的每一步操作，获取的时候，就获取 cssTransform中的记录

 */
function cssTransform(el, attr, val) {
	if(!el.transform){
		el.transform = {}
	}
	if(typeof val == "undefined"){
		console.log("获取样式");
	} else {
		var transformVal = "";
		el.transform[attr] = Number(val);
		//console.log(el.transform);
		for(var s in el.transform){
			//s  el.transform[s]
			switch(s){
				case "rotate":
				case "rotateX":
				case "rotateY":
				case "rotateZ":
				case "skewX":
				case "skewY":
					transformVal += " "+s+"("+el.transform[s]+"deg)";
					break;
				case "translateX":
				case "translateY":
				case "translateZ":
					transformVal += " "+s+"("+el.transform[s]+"px)";
					break;
				case "scale":
				case "scaleX":
				case "scaleY":
					transformVal += " "+s+"("+el.transform[s]/100+")";
					break;
			}
		}
		el.style.WebkitTransform = el.style.transform = transformVal;
	}
	// scale 乘100处理 避免小数误差;
	// translateZ(100px) rotate(90deg) scale(.1) 
}
window.onload = function(){
	var div = document.querySelector('#div');
	cssTransform(div, "translateX",100);
	cssTransform(div, "rotate",60);
	cssTransform(div, "scale",10);
};
</script>
</head>
<body>
<div id="box">
	<div id="div"></div>
</div>	
</body>
</html>

可以看到很简单，我们就是在原来的dom对象想添加一个对应的一个json来保存我们设置的属性，这样就可以设置和获取了

下篇精彩继续:http://blog.csdn.net/xiaomogg/article/details/65042588