使用 CSS 变换属性的解决方案
在展示如何旋转 HTML <div> 元素之前，应该注意的是，将 90 度旋转应用于正方形会产生相同的外观。
我们需要为容器添加宽度和高度属性，并使用“rotate(90deg)”值指定变换属性。
将 <div> 元素旋转 90 度的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#container {
width: 120px;
height: 120px;
background-color: #45d169;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id="container">生活终归还得继续。</div>
</body>
</html>
现在，让我们看一个例子，我们使用一个普通的 <div> 和一个 45 度旋转的 <div> 来显示效果。
将 <div> 元素旋转 45 度的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 120px;
height: 120px;
background-color: #45d169;
}
.rotated {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #3e6ac2;
}
</style>
</head>
<body>
<div>正常的</div>
<div class="rotated">旋转的</div>
</body>
</html>
日期：2020-06-02 22:15:11 来源：oir作者：oir