html把横框转为竖框,html – 使用CSS仅旋转边框[复制]

这个问题与以下内容完全相同：>

CSS Animated Circles – Stop center content from rotating1个

我正在尝试使用css仅旋转边框,但字体图标也在旋转.如何停止图标的旋转并仅使边框？

CSS：

.circle {

width: 100px;

height: 100px;

background: transparent;

border-radius: 50%;

border: 2px dashed #000;

-webkit-animation-name: Rotate;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-name: Rotate;

-moz-animation-duration: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-ms-animation-name: Rotate;

-ms-animation-duration: 2s;

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

}

.play {

padding: 20px 30px;

font-size: 56px;

}

@-webkit-keyframes Rotate

{

from{-webkit-transform:rotate(0deg);}

to{-webkit-transform:rotate(360deg);}

}

@-moz-keyframes Rotate

{

from{-moz-transform:rotate(0deg);}

to{-moz-transform:rotate(360deg);}

}

@-ms-keyframes Rotate

{

from{-ms-transform:rotate(0deg);}

to{-ms-transform:rotate(360deg);}

}

HTML：

这个代码我哪里错了？