css3 2D转换transform

最新推荐文章于 2024-07-12 16:05:19 发布

phoebemeng

最新推荐文章于 2024-07-12 16:05:19 发布

阅读量79

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/phoebemeng/article/details/125660063

版权

css3 2D转换transform(变形)

移动translate
语法 :
transform:translate(x,y)
transform:translateX(n)
transform:translateY(n)
使用:
transform:translate(100px,0) //x轴移动100像素,y轴不动但不能省略
transform:translateX(100px) //只x轴移动
transform:translateY(50px) //只y轴移动
优点:不会影响其他元素的位置
对行内标签没有效果
参数可以跟%单位
transform:translateX(50%)
代表移动的距离是盒子本身宽度的50%

2D旋转

语法:transform:rotate(度数单位deg)
角度正数则是顺时针旋转
角度为负则是逆时针旋转
默认旋转的中心是元素的中心点
案例:三角形

<style>
div {
				position: relative;
				width: 250px;
				height: 35px;
				border: 1px solid #000;
}

div::after {
				content: '';
				/* 伪元素是行内元素,又因为要定位,所以不用再转换 */
				position: absolute;
				top: 8px;
				right: 10px;
				width: 10px;
				height: 10px;
				border-right: 1px solid red;
				border-bottom: 1px solid red;
				transform: rotate(45deg);
				transition: all 0.01s;
			}
			/* 鼠标经过输入框,箭头朝上 */
			div:hover::after{
				transform: rotate(-135deg)
			}
		</style>

设置旋转中心点

transform-origin:x y;
x和y用空格隔开
默认中心点位置50% 50%=center center
可以给x,y设置像素或者方位名词
案例1:

<style>
			/* 设置中心点 */
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 50px auto;
				transition: all 1s;
				/* 以左下角为中心点 利用方位名词设置 */
				transform-origin: left bottom;
			}
			div:hover{
				transform: rotate(360deg);
			}
		</style>

案列2:

<style>
			div {
				width: 200px;
				height: 200px;
				border: 1px solid pink;
				margin: 50px auto;
					overflow: hidden;
			}
			div::before{
				content: 'abc';
				/* 伪元素是行内元素,有宽高要转化为块级元素 */
				display: block;
				width: 100%;
				height: 100%;
				background-color: skyblue;
				transform-origin: left bottom;
				transition: all 1s;
				transform: rotate(180deg);
			}
			div:hover::before{
				transform: rotate(0)
			}
		</style>

2D转换之缩放scale

语法:
transform:scale(x,y)
transform:scale(2,1)
上式代表宽度为原来的2倍,高度不变
transform:scale(2)
上式代表宽高都为原来的2倍
注意:
1.x y是用逗号隔开
2.括号里的数字不跟单位
3.数值小于1及代表缩小

scale的优势:
手动修改宽高会影响其他盒子,放大会往两边和下边放大;
而scale则不会影响其他盒子,还可以设置缩放中心点

案例:鼠标经过图片,图片进行放大

<style>
			div {
				float: left;
				width: 200px;
				height: 200px;
				margin-left: 50px;
				overflow: hidden;
			}
			img{
				width: 200px;
				transition: all 0.3s;
			}
			div:hover{
				transform: scale(1.1);
			}
		</style>
body部分:
<body>
		<div>
			<img src="idol.png" alt="">
		</div>
	</body>

案例–分页按钮

<style>
			li{
				float: left;
				margin:0 10px;
				width: 30px;
				height: 30px;
				border: 1px solid pink;
				list-style: none;
				border-radius: 50%;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
			li:hover{
				transform:scale(1.1);
			}
		</style>

<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
	</body>

转换综合写法

格式:
transform: translate() rotate() scale()…等
注意:
1.顺序会影响转换结果(先旋转会改变坐标轴方向)
2.同时有位移和其他属性的,需要把位移放最前面

小结

1.transform 转换有2D和3D之分
2.三个属性:位移translate,旋转rotate,缩放scale(还有其他属性)
3.2D移动最大优点是不会影响其他元素
4.rotate旋转单位deg
5.scale(x,y) 参数是数字,不跟单位
6.进行综合写法时,同时有位移和其他属性的,需要把位移放最前面