css+沿正方形旋转,CSS3 rotateZ 沿边缘旋转

1

改变rotateZ的正负值，可改变旋转是逆时针还是顺时针。

但是发现上面的b中的文字也会跟着转起来。。。。那有没有法子让b中的内容不跟着一起转动呢？

经测试，可再加入下面的CSS即可，原理就是相对于a转动方向，设置b的方向相反就出现了想要的效果了。.b {

background-color: #00F;

height: 40px;

width: 40px;

border-radius:50%;

position: absolute;

left: 10px;

top:10px;

font-size: 24px;

line-height: 40px;

color: #FFF;

font-family: "微软雅黑";

text-align: center;

-webkit-animation:b 16s linear 0s infinite;animation:b 16s linear 0s infinite;

}

@keyframes b {0%{transform:rotateZ(45deg)} 100%{transform:rotateZ(-315deg)}}

继续阅读：CSS3

原创文章请注明转载自霍者博客本文地址：http://www.huozheweb.com/post/247.html，标题：CSS3 rotateZ 沿边缘旋转