利用css旋转将横着的长方形盒子变成竖着的

KAGHQ

于 2022-06-05 13:27:32 发布

阅读量670

点赞数 1

分类专栏：项目遇到的问题

本文链接：https://blog.csdn.net/LRQQHM/article/details/125130636

版权

css css3 前端

项目遇到的问题专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
border: 1px solid black;
}

#div2
{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align:center;
border: 1px solid black;
background-color: yellow;
transform-origin: 0  0;
transform: rotate(90deg) translateY(-100px)
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>