css3 效果全(旋转

CSS3是一种强大的标记语言，它为Web设计师提供了许多惊人的效果。这里讨论的是CSS3的旋转效果，以及如何在您的网站上使用CSS3来创建这些效果。

/* 基础CSS */ 
.rotation{
    display: inline-block;
    padding: 10px;
    color: #fff;
    background-color: #0072C6;
    font-size: 24px;
}

/* 旋转 */
.rotation:hover{
    transform: rotate(360deg);
}

在上述示例中，我们使用一些基本样式来创建一个有背景颜色和文字的div容器。当鼠标悬停在上面时，我们应用一个CSS3旋转效果，将文本旋转360度。这个例子非常简单，但是，CSS3的旋转功能可以应用在复杂的设计中。下面是一些常见的CSS3旋转效果：

1. 在元素被悬停时旋转：

.rotation:hover{
    transform: rotate(360deg);
}

2. 在元素被点击时旋转：

.rotation:active{
    transform: rotate(360deg);
}

3. 在元素上应用动画效果：

@keyframes myAnimation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.rotation{
    animation: myAnimation 1s infinite;
}

4. 针对压缩宽度和高度时的旋转：

.rotation{
    transform: rotate(360deg);
}

@media screen and (max-width: 768px){
    .rotation{
        transform: rotate(90deg);
    }
}

总之，CSS3旋转效果是一种令人惊叹的方式，可以增加您网站的视觉吸引力并为用户提供更好的交互体验。 无论您是使用它来居中图标，旋转文本或创建3D效果，CSS3都可以为您提供广泛的选择。