CSS3起步 08-------2D的组合变形以及transform

最新推荐文章于 2023-08-07 19:43:58 发布

燃情雪

最新推荐文章于 2023-08-07 19:43:58 发布

阅读量266

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89209252

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

transform相关API

01，transform: matrix(1, 2, 3, 4, 5, 6);
矩阵可以表示所有的单个效果，因为transform的实现原理即为矩阵计算而得，所以在组合变化时，变化样式的顺序不同，就会达到不同的效果，因为矩阵是不可逆的，没有交换律。
02，transform: translate(120px, 50%);平移
03，transform: scale(2, 0.5);扩倍
04，transform: rotate(0.5turn);旋转
05，transform: skew(30deg, 20deg);//斜切
06，transform: scale(0.5) translate(-100%, -100%);//组合变换

transform坑点
01，结合transform时，当transform中变换样式的数量顺序不同时，transition不会生效
02，js中改写样式，只要存在多个参数，且是动态变量，','一定要单独写
如：seletor.style.transform = 'translate('+variable1+'px'+','+variable2+'px)';
若不是动态变量则可以，如：seletor.style.transform = 'translate(0px,0px)';
03，组合变化的执行原理顺序是从右往左矩阵有效列相乘，得出最终位置。
但是为了方便使用，可以想象变化过程【而非执行顺序】是从左往右的。
04，transform对行内元素失效

transform demo1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扇形导航demo1</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			img {
				position: absolute;
				right: 20px;
				bottom: 20px;
				display: block;
				width: 50px;
				height: 50px;
				opacity: 1;
			}
			img:hover {
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="home">
			<div id="inner">
				<img src="img/1.png">
				<img src="img/2.png">
				<img src="img/3.png">
				<img src="img/4.png">
				<img src="img/5.png">
			</div>
			<img src="img/home.png">
		</div>
	</body>
	<script>
		var home = document.querySelector('#home > img');
		var imgList = document.querySelectorAll('#inner > img');
		//位置计算公式
		function Position(radio, count) {
			var clientX, clientY;
			//三角函数是弧度制的
			clientY = -radio * Math.cos(90 / 4 * count * Math.PI / 180);
			clientX = -radio * Math.sin(90 / 4 * count * Math.PI / 180);
			//返回json类型
			return {
				clientX: clientX,
				clientY: clientY
			};
		}
		//利用原型链获取下标
		NodeList.prototype.Indexof = function(value) {
			var res;
			for (res = 0; res < this.length; res++) {
				if (this[res] == value) {
					break;
				}
			}
			return res;
		}
		//点击效果函数
		function Onclik(e) {
			let i = imgList.Indexof(e.target);
			//因为扩倍了,矩形数据更改,所以半径调成了100px
			e.target.style.transition = '0.6s'
			e.target.style.transform = 'scale(1.5) translate(' + Position(100, i).clientX + 'px' + ',' + Position(100, i).clientY +
				'px) rotate(-720deg)';
			e.target.style.opacity = '0';
			//延迟函数用于图标回显
			setTimeout(function() {
				e.target.style.opacity = '1';
				e.target.style.transform = 'scale(1) translate(' + Position(150, i).clientX + 'px' + ',' + Position(150, i).clientY +
					'px) rotate(-720deg)';
			}, 1000);
		};
		//加载后触发,防止transition不生效
		onload = function() {
			var toggle = true;
			//dom0事件,可覆盖
			home.onclick = function() {
				let count;
				if (toggle) {
					home.style.transform = 'rotate(-720deg)';
					home.style.transition = '1s';
					for (count = 0; count < imgList.length; count++) {
						imgList[count].style.transform = 'scale(1) translate(' + Position(150, count).clientX + 'px' + ',' + Position(
							150, count).clientY + 'px) rotate(-720deg)';
						imgList[count].style.transition = (count + 1) * 0.3 + 's';
						//dom2事件,不可覆盖
						imgList[count].addEventListener('click', Onclik)
					}
				} else {
					home.style.transform = 'rotate(-0deg)';
					home.style.transition = '1s';
					for (count = 0; count < imgList.length; count++) {
						imgList[count].style.transform = 'scale(1) translate(0px,0px) rotate(0deg)';
						imgList[count].style.transition = (imgList.length - count) * 0.3 + 's';
					}
				}
				toggle = !toggle;
			};
		}
	</script>
</html>

transform demo2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
				overflow: hidden;
			}
			#wrap {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				text-align: center;
				box-sizing: border-box;
				border: 1px solid black;
				transform: translate(-50%, -50%);
			}
			ul > li {
				position: absolute;
				display: inline-block;
				width: 2px;
				height: 10px;
				background: black;
				transform-origin: center 99px;
			}
			ul > li:nth-child(5n+1) {
				height: 20px;
			}
			#hour {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -100%);
				width: 5px;
				height: 30px;
				display: block;
				background: black;
				transform-origin: center 30px;
			}
			#minute {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -100%) rotate(0deg);
				width: 3px;
				height: 50px;
				display: block;
				background: blueviolet;
				transform-origin: center 50px;
			}
			#second {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -100%) rotate(0deg);
				width: 2px;
				height: 70px;
				display: block;
				background: red;
				transform-origin: center 70px;
			}
			#centerPoint {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(0deg);
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul></ul>
			<div id="hour"></div>
			<div id="minute"></div>
			<div id="second"></div>
			<div id="centerPoint"></div>
		</div>
	</body>
	<script type="text/javascript">
		var count,newNode,scale,hour,minute,second;
		    scale = document.querySelector('#wrap > ul');
			hour = document.querySelector('#hour');
			minute = document.querySelector('#minute');
			second = document.querySelector('#second');
			
		onload = function() {
			for (count = 0; count < 60; count++) {
				newNode = document.createElement('li');
				scale.appendChild(newNode);
				newNode.style.transform = "rotate("+(6*count)+"deg)";
			}
			Move();
			setInterval(Move, 1000);
		}
			
		//指针移动函数
		function Move() {
			let date, h, m, s;
			    date= new Date();
				s = date.getSeconds();
				m = date.getMinutes();
				h = date.getHours();
			hour.style.transform = "translate(-50%, -100%) rotate("+(30*h)+"deg)";	
			minute.style.transform = "translate(-50%, -100%) rotate("+(6*m)+"deg)";
			second.style.transform = "translate(-50%, -100%) rotate("+(6*s)+"deg)";
		}	
	</script>
</html>

ps：
01，选择器尽量写精确，提高性能
02，三角函数所用的是弧度制的
03，可以运用原型链来完成某项功能如获取数组元素下标
04，dom0事件覆盖
05，dom2事件不覆盖【并且可移除绑定事件】

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3起步 08-------2D的组合变形以及transform

transform相关API01，transform: matrix(1, 2, 3, 4, 5, 6);矩阵可以表示所有的单个效果，因为transform的实现原理即为矩阵计算而得，所以在组合变化时，变化样式的顺序不同，就会达到不同的效果，因为矩阵是不可逆的，没有交换律。02，transform: translate(120px, 50%);平移03，transform: scale(2...
复制链接

扫一扫

专栏目录