Untitled

dabblet.css

.front-animation {
	position: relative;
	width: 50%;
}
.mask {
	background-color: rgba(255,0,0,0.3)
}
.content {
	position: absolute;
	top: 3em;
	left: 3em;
	background-color: blue;
	width: 36em;
	height: 36em;
	border-radius: 50%;
	animation: discturn2 ease-in-out 36s;
    animation-iteration-count: 1000;
    transform-origin: 50% 50%;
}

.content p {
	box-sizing: border-box;
	margin-top: -0.1em;
	padding-left: 1em;
	top: 50%;
	width: 100%;
	height: 0%;
	display: block;
	position: absolute;
	outline: 1px dotted red;
	transform-origin: center center;
}

.content p:nth-child(1) { transform: rotate(-10deg); }
.content p:nth-child(2) { transform: rotate(-20deg); }
.content p:nth-child(3) { transform: rotate(-30deg); }
.content p:nth-child(4) { transform: rotate(-40deg); }
.content p:nth-child(5) { transform: rotate(-50deg); }
.content p:nth-child(6) { transform: rotate(-60deg); }
.content p:nth-child(7) { transform: rotate(-70deg); }
.content p:nth-child(8) { transform: rotate(-80deg); }
.content p:nth-child(9) { transform: rotate(-90deg); }
.content p:nth-child(10) { transform: rotate(-100deg); }
.content p:nth-child(11) { transform: rotate(-110deg); }
.content p:nth-child(12) { transform: rotate(-120deg); }
.content p:nth-child(13) { transform: rotate(-130deg); }
.content p:nth-child(14) { transform: rotate(-140deg); }
.content p:nth-child(15) { transform: rotate(-150deg); }
.content p:nth-child(16) { transform: rotate(-160deg); }
.content p:nth-child(17) { transform: rotate(-170deg); }
.content p:nth-child(18) { transform: rotate(-180deg); }
.content p:nth-child(19) { transform: rotate(-190deg); }
.content p:nth-child(20) { transform: rotate(-200deg); }
.content p:nth-child(21) { transform: rotate(-210deg); }
.content p:nth-child(22) { transform: rotate(-220deg); }
.content p:nth-child(23) { transform: rotate(-230deg); }
.content p:nth-child(24) { transform: rotate(-240deg); }
.content p:nth-child(25) { transform: rotate(-250deg); }
.content p:nth-child(26) { transform: rotate(-260deg); }
.content p:nth-child(27) { transform: rotate(-270deg); }
.content p:nth-child(28) { transform: rotate(-280deg); }
.content p:nth-child(29) { transform: rotate(-290deg); }
.content p:nth-child(30) { transform: rotate(-300deg); }
.content p:nth-child(31) { transform: rotate(-310deg); }
.content p:nth-child(32) { transform: rotate(-320deg); }
.content p:nth-child(33) { transform: rotate(-330deg); }
.content p:nth-child(34) { transform: rotate(-340deg); }
.content p:nth-child(35) { transform: rotate(-350deg); }
.content p:nth-child(36) { transform: rotate(-360deg); }

@keyframes discturn {
  0% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(0deg);
  }
  2.77% {
    transform: rotate(10deg);
  }
  4.5% {
    transform: rotate(10deg);
  }
  5.54% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

dabblet.html

<div class="front-animation">
      <div class="mask"><img src="" width="600" height="400" /></div>
      <div class="content">
      	<p>Hallo 1</p>
<p>Hallo 2</p>
<p>Bla Bla bla</p>
<p>Hallo 4</p>
<p>Hallo 5</p>
<p>Hallo 6</p>
<p>Hallo 7</p>
<p>Hallo 8</p>
<p>Hallo 9</p>
<p>Hallo 10</p>
<p>Hallo 11</p>
<p>Hallo 12</p>
<p>Hallo 13</p>
<p>Hallo 14</p>
<p>Hallo 15</p>
<p>Hallo 16</p>
<p>Hallo 17</p>
<p>Hallo 18</p>
<p>Hallo 19</p>
<p>Hallo 20</p>
<p>Hallo 21</p>
<p>Hallo 22</p>
<p>Hallo 23</p>
<p>Hallo 24</p>
<p>Hallo 25</p>
<p>Hallo 26</p>
<p>Hallo 27</p>
<p>Hallo 28</p>
<p>Hallo 29</p>
<p>Hallo 30</p>
<p>Hallo 31</p>
<p>Hallo 32</p>
<p>Hallo 33</p>
<p>Hallo 34</p>
<p>Hallo 35</p>
<p>Hallo 36</p>
      </div>
    </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}