Как закрепить текст в анимируемом блоке

Есть крутящийся блок с текстом,при наведении на который(блок), он останавливается.При повороте блока на 180 градусов, текст внутри него меняет расположение.Как это остановить(закрепить текст на месте).

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

 :focus,
 :active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}


/*обнуление*/

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes rotate {
  to {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.main .main__1block,
.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.main .main__1block {
  position: relative;
  background: rgba(0, 0, 0, 0.062);
  border-radius: 10px;
  width: 400px;
  height: 200px;
  border: 3px solid #f10000;
  margin: 200px;
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.main .main__1block {
  font-family: "PT Sans", sans-serif;
  font-style: italic;
}

.main .main__1block {
  -webkit-animation: rotate 5s linear 0s infinite normal none;
  animation: rotate 5s linear 0s infinite normal none;
}

.main .main__1block:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  border: 3px solid black;
}
<div class="main">
  <div class="main__1block">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, vitae ducimus beatae iure, voluptatem earum at hic aliquid tempore corrupti veniam commodi corporis explicabo facere animi! Ab unde fuga vitae?</p>
  </div>


</div>


Ответы (0 шт):