CSS实现旋转,缩放 --- CSS3之 2D 转换

这篇博客介绍了CSS3中的2D转换,包括旋转和缩放。通过具体的案例展示了如何使用transform属性实现元素的旋转效果以及缩放效果,特别是缩放功能在分页显示中的应用,当鼠标悬停时,数字会放大。
摘要由CSDN通过智能技术生成

相关知识点:
1、旋转
在这里插入图片描述
在这里插入图片描述
2、缩放
在这里插入图片描述

3、2D转换综合写法在这里插入图片描述
综合写法:
在这里插入图片描述

4、2D 转换总结
2D即平面的,x轴和y轴在这里插入图片描述

1、效果:实现框中内部右边的箭头
在这里插入图片描述

p::before {
	content: '';
	position: absolute;
	right: 20px;
	top: 10px;
	width: 10px;
	height: 10px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(45deg);
}

2、案例:旋转案例
代码:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
3、案例:2D 转换之缩放scale,分页显示,当鼠标经过时,数字变大
在这里插入图片描述
代码:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值