Как закрепить текст в анимируемом блоке
Есть крутящийся блок с текстом,при наведении на который(блок), он останавливается.При повороте блока на 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>