CSS实战与技巧——74. 2D角度转换【transform: rotateZ（度数）】

最新推荐文章于 2025-04-22 16:41:53 发布

时间sk

最新推荐文章于 2025-04-22 16:41:53 发布

阅读量336

点赞数 4

分类专栏： CSS进阶文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_63215361/article/details/145917493

版权

CSS进阶专栏收录该内容

85 篇文章

订阅专栏

角度转换：就是让元素转换一个角度
值:角度 deg,可以是负值，正负值方向相反
默认的基点在元素中心点
2D角度转换,绕Z轴旋转
2D角度转换，正值顺时针旋转，负值逆时针旋转

transform:rotate（45deg）；rotate没加如何轴就默认是z轴旋转
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			#box{
				width: 300px;height: 300px;background: #000;
				margin: 100px auto;
				/*视距属于transform的前置属性,写在父级中*/
				perspective: 500px;
			}
			#zxw{
				width: 300px;height: 300px;background: red;
			}
			#zxw:hover{
				/*角度转换:元素转一个角度*/
				/*值:角度 deg,可以是负值，正负值方向相反*/
				/*默认的基点在元素中心点*/
				
				/*2D角度转换,绕Z轴旋转*/
				/*2D角度转换，正值顺时针旋转，负值逆时针旋转*/
				transform: rotateZ(45deg);
				/*transform: rotate(45deg);//rotate没加如何轴就是默认z轴旋转
				transform: rotate(-45deg);*/
				
				
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="box">
			<div id="zxw">
				我要自学网
			</div>
		</div>
		
		
	</body>
</html>