1. 介绍
CSS（Cascading Style Sheets），即层叠样式表，是一种用来描述HTML（超文本标记语言）或XML（可扩展标记语言）等文档外观样式的语言。在CSS中，有一个属性可以实现旋转45度，让元素按照不同的角度展示，这个属性是transform: rotate(45deg);。
2. transform属性
2.1 transform简介
transform属性是CSS3新增的属性之一，它可以用来对元素进行平移、旋转、缩放、倾斜等变换操作，可以实现复杂的效果和动画。常见的transform变换函数包括：rotate、scale、translate和skew等。
要使用transform属性，需要先在CSS中指定元素的位置属性，如position: absolute;。然后在元素的样式中，添加transform属性和变换函数。
2.2 旋转变换
在CSS中，使用rotate(angle)函数可以对元素进行旋转变换，其中angle表示旋转的角度（单位可以是deg、rad、grad或turn）。其中，如果旋转角度为正数，则顺时针旋转，如果旋转角度为负数，则逆时针旋转。
/* 将一个元素逆时针旋转45度 */
.box {
transform: rotate(-45deg);
}
上述代码将一个元素逆时针旋转45度。
2.3 旋转45度的实现
要实现旋转45度的效果，只需要将旋转函数中的角度单位设为deg，并将角度值设为45度即可。代码如下：
/* 将一个元素顺时针旋转45度 */
.box {
transform: rotate(45deg);
}
上述代码将一个元素顺时针旋转45度。
3. 实例展示
下面给出一个简单的实例，展示如何使用CSS实现旋转45度的效果。（示例演示的代码仅供参考，实际使用时需要根据自己的需求进行调整）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS旋转45度实例</title>
<style>
.container {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: #eee;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
上述代码中，.container是一个容器元素，它的宽度和高度都为300px，背景颜色为灰色，使用了相对定位。而.box是一个红色的方块元素，它的宽度和高度都为100px，使用了绝对定位，并且位于容器的中心位置，并且使用了transform: rotate(45deg);将自身进行了旋转变换。
4. 总结
通过本文的介绍，我们了解到了transform: rotate()可以用来实现元素的旋转变换，其中rotate()函数可以接受一个角度值，用来指定旋转的角度。本文还提供了一个简单的实例，帮助大家更好地理解如何使用CSS来实现旋转45度的效果。