rotate设置后position的操作

最新推荐文章于 2023-11-13 14:20:24 发布

hello，是翠花呀

最新推荐文章于 2023-11-13 14:20:24 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css transform position

本文链接：https://blog.csdn.net/qq_26769677/article/details/100631270

版权

CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在网上看见有人需要做一个功能，将竖着接收的图片，旋转-90度或者270度，使图片与包裹它的div重合。大概意思是要将黄色部分旋转后与蓝色部分重合。

初始样式：

<!DOCTYPE html>
<html>
<head>
<style>
.one{
    margin:40px;
    width:200px;
    height:100px;
    background-color:blue;
}
.two{
    width:100px;
    height:200px;
    background-color:yellow;
}
</style>
</head>
<body>
<div class="one">
    <div class="two">Hello World</div>
</div>
</body>
</html>

第一反应可能会是这么写：

.one{
	position:relative;
    margin:30px;
    width:200px;
    height:100px;
    background-color:blue;
    z-index:1;
}
.two{
    width:100px;
    height:200px;
    background-color:yellow;
    transform:rotate(-90deg);
    position:absolute;
    top:0px;
    left:0px;
    z-index:99;
}

但是结果是这样：
在这里插入图片描述
要使黄色部分和蓝色部分重合。此时需要将黄色部分旋转，但是旋转之后并不能使黄色部分和蓝色重合，原因是黄色部分的宽高和蓝色部分相反，而又是相对定位，所以看上一图，黄色中心点的坐标相对蓝色为(50,0)，所以当它旋转后中心点还是(50,0)。此时再设置绝对定位top:0;left:0;还是不能重合，原因是这个定位是作用于没有旋转之前的元素，而没有旋转之前的元素的左上角顶点是与蓝色元素左上角顶点重合的。

所以我们需要在旋转前移动黄色元素的中心点，让黄色元素的中心与蓝色元素中心重合。

如图，我们需要将黄色中心点移至蓝色中心点重合。得出公式(x,-y)=(X-Y)/2。这里(x,-y)代表黄色(子级)绝对定位的left和top值，(X-Y)代表蓝色(父级)的宽高。
在这里插入图片描述
最终样式：

.one{
	position:relative;
    margin:30px;
    width:200px;
    height:100px;
    background-color:blue;
    z-index:1;
}
.two{
	width:100px;
	height:200px;
	background-color:yellow;
	transform:rotate(-90deg);
	position:absolute;
	top:-50px;
	left:50px;
	z-index:99;
}

hello，是翠花呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rotate设置后position的操作

在网上看见有人需要做一个功能，将竖着接收的图片，旋转-90度或者270度，使图片与包裹它的div重合。大概意思是要将黄色部分旋转后与蓝色部分重合。初始样式：<!DOCTYPE html><html><head><style>.one{ margin:40px; width:200px; height:100p...
复制链接

扫一扫