[分享]css中div旋转90度

CSS中的div元素是我们经常用到的元素，而它的旋转也是我们在网页设计中经常使用的效果之一。在CSS中，我们可以通过transform属性来实现div元素的旋转，其中，旋转90度的代码如下：div{ ...

CSS中的div元素是我们经常用到的元素，而它的旋转也是我们在网页设计中经常使用的效果之一。在CSS中，我们可以通过transform属性来实现div元素的旋转，其中，旋转90度的代码如下：

div{
    transform:rotate(90deg);
} 

通过这段代码，我们可以将一个div元素旋转90度，使其成为竖向的布局。同时，在实际应用中，我们还可以通过其他属性来调整旋转后元素的位置和大小，例如：

div{
    transform:rotate(90deg);
    transform-origin:top left;
    width:100px;
    height:200px;
} 

在上述代码中，我们通过transform-origin属性来指定元素旋转的中心点，这里设置为左上角。同时，我们还设置了div元素的宽度和高度，使其在旋转后具有合适的尺寸。

需要注意的是，在使用transform属性旋转元素时，旋转是基于元素的中心点进行的。因此，如果需要将元素旋转后向上或向下平移一定距离，可以通过使用translateX和translateY属性来实现：

div{
    transform:rotate(90deg) translateX(100px);
} 

上述代码将div元素旋转90度后，向右平移了100像素的距离。类似地，我们也可以将元素向左或向下平移。

总之，CSS中的transform属性为我们提供了强大的元素变换功能，div元素的旋转也是其中的一种效果之一。在实际应用中，我们可以通过灵活地使用其他属性来调整元素的位置和大小，从而实现更加丰富的效果。