rich1.0phorkiehttps://p.cweiske.de/animate rotate pageChristian Weiske86400900900<!-- embedding all files of https://p.cweiske.de/205 -->
<link rel="stylesheet" href="https://p.cweiske.de/css/embed.css"/>
<div class="phork" id="205">
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.css .de1, .css .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.css {font-family:monospace;}
.css .imp {font-weight: bold; color: red;}
.css li, .css .li1 {color: #DDD;}
.css .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.css .kw1 {color: #000000; font-weight: bold;}
.css .kw2 {color: #993333;}
.css .co1 {color: #a1a100;}
.css .co2 {color: #ff0000; font-style: italic;}
.css .coMULTI {color: #808080; font-style: italic;}
.css .es0 {color: #000099; font-weight: bold;}
.css .br0 {color: #00AA00;}
.css .sy0 {color: #00AA00;}
.css .st0 {color: #ff0000;}
.css .nu0 {color: #cc66cc;}
.css .re0 {color: #cc00cc;}
.css .re1 {color: #6666ff;}
.css .re2 {color: #3333ff;}
.css .re3 {color: #933;}
.css span.xtra { display:block; }
</style><div class="code"><table class="css"><tbody><tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="de1"><pre class="de1">body <span class="br0">{</span>
    <span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw2">red</span><span class="sy0">;</span>
    animation<span class="sy0">:</span> foo 10s infinite<span class="sy0">;</span>
<span class="br0">}</span>
<span class="co1">@keyframes foo {</span>
  <span class="re3">0%</span>   <span class="br0">{</span> transform<span class="sy0">:</span> rotate<span class="br0">(</span>0deg<span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>
  <span class="re3">33%</span>   <span class="br0">{</span> transform<span class="sy0">:</span> rotate<span class="br0">(</span>-10deg<span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>
  <span class="re3">66%</span>   <span class="br0">{</span> transform<span class="sy0">:</span> rotate<span class="br0">(</span>10deg<span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>
  <span class="re3">100%</span> <span class="br0">{</span> transform<span class="sy0">:</span> rotate<span class="br0">(</span>0deg<span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>
<span class="br0">}</span></pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/205/rev-raw/f04135b9a4acf70893aed6255e997a6df3a4ef52/rotate.css" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/205#rotate.css">rotate.css</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .de1, .xml .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.xml {font-family:monospace;}
.xml .imp {font-weight: bold; color: red;}
.xml li, .xml .li1 {color: #DDD;}
.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.xml .es0 {color: #000099; font-weight: bold;}
.xml .br0 {color: #66cc66;}
.xml .sy0 {color: #66cc66;}
.xml .st0 {color: #ff0000;}
.xml .sc-1 {color: #808080; font-style: italic;}
.xml .sc0 {color: #00bbdd;}
.xml .sc1 {color: #ddbb00;}
.xml .sc2 {color: #339933;}
.xml .sc3 {color: #009900;}
.xml .re0 {color: #000066;}
.xml .re1 {color: #000000; font-weight: bold;}
.xml .re2 {color: #000000; font-weight: bold;}
.xml span.xtra { display:block; }
</style><div class="code"><table class="xml"><tbody><tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="de1"><pre class="de1"><span class="sc3"><span class="re1"><html<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><head<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><title<span class="re2">></span></span></span>Test rotate page<span class="sc3"><span class="re1"></title<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><link</span> <span class="re0">rel</span>=<span class="st0">"stylesheet"</span> <span class="re0">href</span>=<span class="st0">"rotate.css"</span> <span class="re2">/></span></span>
 <span class="sc3"><span class="re1"></head<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><body</span> <span class="re0">style</span>=<span class="st0">"background-color: grey; border: 1px solid black"</span><span class="re2">></span></span>
  <span class="sc3"><span class="re1"><h1<span class="re2">></span></span></span>Rotate a page with CSS<span class="sc3"><span class="re1"></h1<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><p<span class="re2">></span></span></span>This is a test.<span class="sc3"><span class="re1"></p<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span>
<span class="sc3"><span class="re1"></html<span class="re2">></span></span></span>
 </pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/205/rev-raw/f04135b9a4acf70893aed6255e997a6df3a4ef52/test.htm" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/205#test.htm">test.htm</a>
</div>
</div>
</div>