CSS3 transform-origin属性设置元素旋转起始位置

最新推荐文章于 2023-02-16 19:57:46 发布

陈醋拌饭

最新推荐文章于 2023-02-16 19:57:46 发布

阅读量3.2k

点赞数 2

分类专栏： css3 文章标签： css3 html html5 css

本文链接：https://blog.csdn.net/weixin_44167504/article/details/108418195

版权

css3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

CSS3 transform-origin属性设置元素旋转起始位置

作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。
使用：transform-origin：x-axis y-axis z-axis;
x-axis取值：left、right、center、length、%
y-axis取值：top、bottom、center、length、%
z-axis取值：length
transform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%）
transform-origin：left top；（以左上角为基点）
transform-origin：right top；（以右上角为基点）
transform-origin：center bottom；（以底线中心为基点）
其他同理。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
#div1
{
	position: relative;
	height: 200px;
	width: 200px;
	margin: 100px;
	padding:10px;
	border: 1px solid black;
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transition:0.2s linear;
	transform-origin:center bottom;
}
	#div2:hover{
	transform: rotate(45deg);
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Safari and Chrome */
	}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

菜鸟实例

陈醋拌饭

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transform-origin属性设置元素旋转起始位置

CSS3 transform-origin属性作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。使用：transform-origin：x-axis y-axis z-axis;x-axis取值：left、right、center、length、%y-axis取值：top、bottom、center、length、%z-axis取值：lengthtransform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%）tran
复制链接

扫一扫