|
使用 CSS 变换属性的解决方案 在展示如何旋转 HTML 元素之前，应该注意的是，将 90 度旋转应用于正方形会产生相同的外观。 我们需要为容器添加宽度和高度属性，并使用“rotate(90deg)”值指定变换属性。 将 元素旋转 90 度的示例：
文档的标题
#container {
width: 120px;
height: 120px;
background-color: #45d169;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
生活终归还得继续。
现在，让我们看一个例子，我们使用一个普通的 和一个 45 度旋转的 来显示效果。 将 元素旋转 45 度的示例：
文档的标题
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;
}
正常的
旋转的
|