CSS旋转90度|极客教程

CSS旋转90度

在网页设计中，我们经常会遇到需要旋转元素的情况，其中旋转元素90度是一种常见的需求。在CSS中，我们可以通过transform属性来实现元素的旋转，本文将详细介绍如何使用CSS来旋转元素90度。

transform属性

transform是CSS3中的一个属性，用来实现元素的变换效果，包括平移、缩放、旋转和倾斜等。其中旋转是transform属性中常用的一个功能，通过设置rotate属性可以实现元素的旋转。

旋转90度

要实现元素旋转90度，可以通过设置rotate属性为90度来实现。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotate {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="rotate"></div>
</body>
</html>

在上面的示例代码中，我们定义了一个class为rotate的div元素，设置了宽高为100px，背景颜色为红色，并且通过transform: rotate(90deg);来实现元素旋转90度。打开浏览器查看页面效果，可以看到div元素被旋转了90度。

CSS3旋转函数rotate

除了直接使用transform: rotate(90deg);来实现元素的旋转外，CSS3还提供了rotate()函数，可以更灵活地控制旋转角度。rotate()函数接受一个参数，表示旋转的角度，可以为正数、负数、整数或小数。

下面是使用rotate()函数实现元素旋转90度的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotate {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(90deg);
        }

        .rotate2 {
            width: 100px;
            height: 100px;
            background-color: green;
            transform: rotate(1.5708rad);
        }
    </style>
</head>
<body>
    <div class="rotate"></div>
    <div class="rotate2"></div>
</body>
</html>

在上面的示例代码中，我们定义了两个class为rotate和rotate2的div元素，分别通过transform: rotate(90deg);和transform: rotate(1.5708rad);来实现元素旋转90度。其中1.5708rad是90度对应的弧度值。打开浏览器查看页面效果，可以看到两个div元素分别被旋转了90度。