css怎么旋转div |html css参考文献

//html代码
<div class="box"></div>
//css代码
.box {
width: 100px;
height: 100px;
background: red;
transform: rotate(45deg);
}

在上面的代码中，大家创建了一个class为box的div，并将其宽高设置为100px，并且背景颜色为红色。接下来的关键就是通过transform属性将其进行旋转，大家设置rotate函数，传入角度参数，例如上面将其旋转了45度

除了rotate函数，还有另外两个常用的旋转函数，分别是skew和scale。skew可以将div进行斜切，而scale则可以进行缩放操作。下面是它们的具体用法：

//使用skew函数
.box {
width: 100px;
height: 100px;
background: red;
transform: skew(30deg);
}
//使用scale函数
.box {
width: 100px;
height: 100px;
background: red;
transform: scale(2);
}

通过上面的几个例子，大家可以发现，CSS的transform属性可以实现div的各种旋转操作，从而使得页面的展示更加生动有趣。