Css3控制变形原点

最新推荐文章于 2023-01-01 11:52:02 发布

月疯

最新推荐文章于 2023-01-01 11:52:02 发布

阅读量279

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119515499

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

本文探讨了CSS3中如何通过`transform-origin`设置元素旋转和缩放的中心点，并展示了多个div元素在鼠标悬停时按角度依次旋转的实例。重点讲解了旋转和缩放对位移的影响，以及使用`:nth-child`选择器实现不同元素的差异化效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 500px;
				height: 300px;
				background: red;
				margin: 100px auto;
			}
			div{
				width: 200px;
				height: 100px;
				background: blue;
				transition: 1s;
				/* 控制转动中心点 */
				transform-origin: left center;
			}
			section:hover div{
				transform: rotate(180deg);
				/* transform: scale(0.7); */
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
		</section>
	</body>
</html>

小列子扇形原点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 500px;
				height: 300px;
				background: red;
				margin: 100px auto;
				position: relative;
			}
			div{
				width: 30px;
				height: 150px;
				background: blue;
				transition: 1s;
				bottom: 15px;
				left: 250px;
				/* 控制转动中心点 */
				transform-origin:center bottom;
				position: absolute;
			}
			section:hover div:nth-child(1){
				transform: rotate(90deg);
				background: orange;
			}
			section:hover div:nth-child(2){
				transform: rotate(75deg);
				background: red;
			}
			section:hover div:nth-child(3){
				transform: rotate(60deg);
				background: green;
			}
			section:hover div:nth-child(4){
				transform: rotate(45deg);
				background: yellow;
			}
			section:hover div:nth-child(5){
				transform: rotate(30deg);
				background: pink;
			}
			section:hover div:nth-child(6){
				transform: rotate(15deg);
				background: palevioletred;
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>

注意：旋转、缩放对位移的影响！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
			section{
				width: 600px;
				height: 400px;
				margin: 100px auto;
				background: #ccc;
			}
			div{
				width: 100px;
				height: 50px;
				background: red;
				transition: 1s;
			}
			section:hover div{
				transform: translateX(200px) scale(2);
				/* 位移会移动原来的2倍 */
				/* transform: scale(2) translateX(200px); */
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
		</section>
	</body>
</html>

如果变换成先缩放，再位移。

transform: scale(2) translateX(200px);

位移的长度是原来的俩倍，所以要特别的注意。

月疯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css3控制变形原点

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 300px; background: r...
复制链接

扫一扫

专栏目录