Html CSS3转换以旋转元素，而不旋转它'；内容_Html_Css_Rotation_Css Animations

Html CSS3转换以旋转元素，而不旋转它'；内容

html css

Html CSS3转换以旋转元素，而不旋转它'；内容,html,css,rotation,css-animations,Html,Css,Rotation,Css Animations,我需要用css3动画旋转一个div，同时去掉div旋转中的文本。我试了很多方法，但到目前为止没有一种有效。有人知道我怎么做吗这是我的密码： <body> <div class="border"> <span class="contenue"> <p>text</p> </span> </div> <style>

我需要用css3动画旋转一个div，同时去掉div旋转中的文本。我试了很多方法，但到目前为止没有一种有效。有人知道我怎么做吗

这是我的密码：


<body>
  <div class="border">
    <span class="contenue">
        <p>text</p>
    </span>
  </div>
   
<style>
    
body {
  background-color: #222;
  color: #fff;
  text-align: center;
}

.border{
    height: 100px;
    width: 100px;
    border-radius: 100%;
    box-shadow: 0 1px 0 0 rgba(255, 192, 0, 0.25), 0 -1px 0 0 rgba(255, 64, 0, 0.25), 1px 0 0 0 rgba(255, 192, 0, 0.25), -1px 0 0 0 rgba(255, 64, 0, 0.25), 1px -1px 0 0 rgba(255, 128, 0, 0.5), -1px 1px 0 0 rgba(255, 128, 0, 0.5), 1px 1px 0 0 rgba(255, 255, 0, 0.75), -1px -1px 0 0 rgba(255, 0, 0, 0.75);
}

@keyframes psycho {
  0% {
    transform: rotate(0deg) scale(1) translate(0, 0);
  }
  33% {
    transform: rotate(360deg) scale(1) translate(5px, 5px);
  }
  66% {
    transform: rotate(720deg) scale(1) translate(-5px, -5px);
  }
  100% {
    transform: rotate(1080deg) scale(1) translate(0, 0);
    }
}

.border{
  animation: psycho 2s linear infinite;
}
</style>


正文
身体{
背景色：#222；
颜色：#fff；
文本对齐：居中；
}
.边界{
高度：100px；
宽度：100px；
边界半径：100%；
盒影：0 1px 0 0 rgba（255，192，0，0.25），0-1px 0 rgba（255，64，0，0.25），1px 0 0 rgba（255，192，0，0.25），-1px 0 0 rgba（255，64，0，0.25），1px-1px 0 rgba（255，128，0，0.5），1px 1px 0 rgba（255，255，0，0.75），-1px-1px 0 rgba（255，0，0.75）；
}
@关键帧心理{
0% {
变换：旋转（0度）缩放（1）平移（0,0）；
}
33% {
变换：旋转（360度）缩放（1）平移（5px，5px）；
}
66% {
变换：旋转（720度）缩放（1）平移（-5px，-5px）；
}
100% {
变换：旋转（1080度）缩放（1）平移（0,0）；
}
}
.边界{
动画：心理2s线性无限；
}