旋转效果 html,html – 旋转效果锚标签CSS3

Helo伙计们！

我试图用CSS3创建旋转悬停效果.

然而,我现在要做的是创造一些旋转,但这次是它的盒子类型

就像这个图像：

所以基本上我想要类似于上面显示的jsFiddle的类似效果,但这次它必须是盒子.

真的很难搞清楚这一点.这是我的CSS：

body {

background: #292929;

padding-left: 30px;

font-size: 12px;

}

.twist {

display: inline-block;

font-size: 45px;

line-height: 90px;

cursor: pointer;

margin: 20px;

width: 90px;

height: 90px;

border-radius: 50%;

text-align: center;

position: relative;

text-decoration: none;

z-index: 1;

color: #fff;

}

.twist:after {

pointer-events: none;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

content:'';

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

.twist:before {

speak: none;

font-size: 48px;

line-height: 90px;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

display: block;

-webkit-font-smoothing: antialiased;

}

.twist.demo-4 {

width: 92px;

height: 92px;

box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);

}

.twist.demo-4:before {

line-height: 92px;

}

.twist.demo-4:after {

top: -4px;

left: -4px;

padding: 0;

z-index: 10;

border: 4px dashed #fff;

}

.twist.demo-4:hover {

box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);

color: #fff;

}

.twist.demo-4:hover i {

color: #fff;

}

.twist.demo-4.spin:hover {

-webkit-transition: box-shadow 0.2s;

-moz-transition: box-shadow 0.2s;

transition: box-shadow 0.2s;

}

.twist.demo-4.spin:hover:after {

-webkit-animation: spinAround 9s linear infinite;

-moz-animation: spinAround 9s linear infinite;

animation: spinAround 9s linear infinite;

}

@-webkit-keyframes spinAround {

from {

-webkit-transform: rotate(0deg)

}

to {

-webkit-transform: rotate(360deg);

}

}

@-moz-keyframes spinAround {

from {

-moz-transform: rotate(0deg)

}

to {

-moz-transform: rotate(360deg);

}

}

@keyframes spinAround {

from {

transform: rotate(0deg)

}

to {

transform: rotate(360deg);

}

}

希望你能帮我一个jsFiddle文件.

谢谢！