纯CSS3制作的鼠标悬停时边框旋转

下面是纯CSS3制作的鼠标悬停时边框旋转的完整攻略。

1. CSS3边框旋转原理

在CSS3中，利用transition、transform、border等属性，我们可以轻松实现边框旋转的效果，具体步骤如下：

1. 为元素设置 border 属性，同时设置好初始状态下的边框样式（比如实线，2px粗细等）。
2. 为元素设置 transition 属性，以便边框旋转时可以流畅过渡。
3. 为元素设置鼠标悬停状态下的边框样式（比如虚线，4px粗细等）。
4. 为元素设置旋转效果。这里我们可以使用transform属性嵌套rotate函数实现旋转，也可以使用box-shadow属性实现投影效果来达到边框旋转的效果。

2. 实现示例

下面给出两个实现示例：

示例一：实现鼠标悬停时边框旋转

<p class="border-rotate">这是一个段落</p>

.border-rotate {
  border: 2px solid #000;
  transition: all 0.5s ease;
  padding: 10px;
  width: 200px;
  height: 100px;
  text-align: center;
}

.border-rotate:hover {
  border: 4px dashed #f00;
  transform: rotate(5deg);
}

在上述示例中，我们创建了一个 p 元素，并为其设置了一个名为 border-rotate 的样式class，这个class是用来实现边框旋转效果的。

首先，我们设置了元素的默认状态下的边框样式为2px粗细的黑色实线边框，同时设置了过渡效果。当鼠标悬停在元素上时，触发hover状态，此时边框样式变为4px粗细的红色虚线边框，同时元素旋转5°。

示例二：实现边框旋转带有投影效果

<div class="border-boxshadow"></div>

.border-boxshadow {
  border: 2px solid #000;
  transition: all 0.5s ease-in-out;
  width: 200px;
  height: 100px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}

.border-boxshadow:hover {
  border: 4px dashed #f00;
  transform: rotate(5deg);
  box-shadow: 0 0 10px 10px rgba(0,0,0,.5);
}

在上述示例中，我们创建了一个 div 元素，并为其设置了一个名为 border-boxshadow 的样式class，这个class是用来实现边框旋转效果和投影效果的。

首先，我们设置了元素的默认状态下的边框样式为2px粗细的黑色实线边框和10px的投影效果。当鼠标悬浮在元素上时，触发hover状态，此时边框样式变为4px粗细的红色虚线边框，同时元素旋转5°，投影效果也从10px转为10px 10px 10px 10px的投影效果。

总结

以上是CSS3制作鼠标悬停时边框旋转的完整攻略，我们可以通过以上方式实现各种炫酷的边框特效，吸引用户的注意力。