transform-origin解析例子：环形旋转

最新推荐文章于 2024-07-07 13:22:35 发布

前端的南姐

最新推荐文章于 2024-07-07 13:22:35 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/happygirlnan/article/details/97374329

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

transform-origin属性其实就是指定2D或3D变换/动画的中心点。其赋值是基于变换元素的位置。元素的左上角位置为(0,0)。

下面的例子是小DIV绕着中心进行圆环形旋转。中心点的位置是200,200。但是设置transform-origin时要计算出这个中心点相对

于小DIV(变换元素)所在的位置，即190,100

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

    #div2
    {
	    position: absolute;
	    top:100px;
	    left:10px;
	    width:60px;
	    height:60px;
	    border: 1px solid black;
	    background-color: red;
	    animation:myfirst 30s;
	    transform-origin:190px 100px;
    }
	#c{
		width:5px;height:5px;
		background-color:black;
		position: absolute;
		top:200px;
		left:200px;
	}
	@keyframes myfirst{
		100%{
			transform:rotate(-360deg);
		}
	}
</style>
</head>
<body>
<div id="div1">
  <div id="div2"></div>
	<div id="c"></div>
</div>
</body>
</html>

我这种脑子反映慢的人，就得记录的这么详细，不然下次又不知道怎么回事了。/(ㄒoㄒ)/~~

前端的南姐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transform-origin解析例子：环形旋转

transform-origin属性其实就是指定2D或3D变换/动画的中心点。其赋值是基于变换元素的位置。元素的左上角位置为(0,0)。下面的例子是小DIV绕着中心进行圆环形旋转。中心点的位置是200,200。但是设置transform-origin时要计算出这个中心点相对于小DIV(变换元素)所在的位置，即190,100<!DOCTYPE html><html...
复制链接

扫一扫

专栏目录