css3新增样式属性transform,用translate居中显示

1.旋转 rotate(度数deg)
2.位移translate(x轴位移,y轴位移)
3.缩放scale(水平缩放值,垂直缩放值)
4.倾斜skew(度数deg)
3.translate使用于居中显示
方法一:父级position:relative
子级: position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

<html>
<style>
  div{
	position:relative;
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	position:absolute;
	width:100px;
	height:100px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:pink;
	transition:transform 1s;
	transform:rotate(45deg);
  }
  div:hover .p1{
	transform:rotate(360deg);
  }
</style>
<body>
	<div>
		<p class="p1"></p>
	</div>
</body>
</html>

方法二:
transform:translate(-50%,-50%)

在这里插入代码片
<html>
<style>
  div{
	position:relative;
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100px;
	height:100px;
	background-color:pink;
  }
</style>
<body>
	<div>
		<p class="p1"></p>
	</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值