html圆圈3d翻转,使用css转换和3d旋转的圆形鼠标悬停效果【2例】

今天给大家介绍一个关于如何用css转换和3d旋转在圆上创建不同有趣的悬停效果的教程。

圆形鼠标悬停效果

在今天的教程中，我们将在圆上实现悬停效果。因为我们有边界半径属性，所以我们可以创建圆形，并且它们在网站中经常作为设计元素出现。我特别喜欢看到的一个用途是圆形缩略图，它看起来比通常的矩形要有趣得多。因为这个圆是一个特殊的形状，我们将为它创建一些特殊的悬停效果！

所以，我们开始吧！

HTML

对于大多数示例，我们将使用以下结构：

• Use what you have

  by Angela Duncan View on Dribbble

• Common Causes of Stains

  by Antonio F. Mondragon View on Dribbble

• Pink Lightning

  by Charlie Wagers View on Dribbble

虽然我们可以在这里使用图像，但我们将通过使用背景图像以便维护更加方便。我们将在以“ch img-”开头的类中定义它们。另外，我们将有一个带有标题的项目描述分区。

现在，让我们做一些悬停效果！

CSS

我们为列表和列表项定义一些公共样式：

.ch-grid {

margin: 20px 0 0 0;

padding: 0;

list-style: none;

display: block;

text-align: center;

width: 100%;

}

.ch-grid:after,

.ch-item:before {

content: '';

display: table;

}

.ch-grid:after {

clear: both;

}

.ch-gr