{"type":"rich","version":"1.0","provider_name":"phorkie","provider_url":"https:\/\/p.cweiske.de\/","title":"animate rotate page","author_name":"Christian Weiske","cache_age":86400,"width":900,"height":900,"html":"<!-- embedding all files of https:\/\/p.cweiske.de\/205 -->\n<link rel=\"stylesheet\" href=\"https:\/\/p.cweiske.de\/css\/embed.css\"\/>\n<div class=\"phork\" id=\"205\">\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.css .de1, .css .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.css  {font-family:monospace;}\n.css .imp {font-weight: bold; color: red;}\n.css li, .css .li1 {color: #DDD;}\n.css .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.css .kw1 {color: #000000; font-weight: bold;}\n.css .kw2 {color: #993333;}\n.css .co1 {color: #a1a100;}\n.css .co2 {color: #ff0000; font-style: italic;}\n.css .coMULTI {color: #808080; font-style: italic;}\n.css .es0 {color: #000099; font-weight: bold;}\n.css .br0 {color: #00AA00;}\n.css .sy0 {color: #00AA00;}\n.css .st0 {color: #ff0000;}\n.css .nu0 {color: #cc66cc;}\n.css .re0 {color: #cc00cc;}\n.css .re1 {color: #6666ff;}\n.css .re2 {color: #3333ff;}\n.css .re3 {color: #933;}\n.css span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"css\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\">body <span class=\"br0\">&#123;<\/span>\n&#160; &#160; <span class=\"kw1\">background-color<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">red<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; animation<span class=\"sy0\">:<\/span> foo 10s infinite<span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n<span class=\"co1\">@keyframes foo {<\/span>\n&#160; <span class=\"re3\">0%<\/span> &#160; <span class=\"br0\">&#123;<\/span> transform<span class=\"sy0\">:<\/span> rotate<span class=\"br0\">&#40;<\/span>0deg<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span>\n&#160; <span class=\"re3\">33%<\/span> &#160; <span class=\"br0\">&#123;<\/span> transform<span class=\"sy0\">:<\/span> rotate<span class=\"br0\">&#40;<\/span>-10deg<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span>\n&#160; <span class=\"re3\">66%<\/span> &#160; <span class=\"br0\">&#123;<\/span> transform<span class=\"sy0\">:<\/span> rotate<span class=\"br0\">&#40;<\/span>10deg<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span>\n&#160; <span class=\"re3\">100%<\/span> <span class=\"br0\">&#123;<\/span> transform<span class=\"sy0\">:<\/span> rotate<span class=\"br0\">&#40;<\/span>0deg<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/205\/rev-raw\/f04135b9a4acf70893aed6255e997a6df3a4ef52\/rotate.css\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/205#rotate.css\">rotate.css<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.xml .de1, .xml .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.xml  {font-family:monospace;}\n.xml .imp {font-weight: bold; color: red;}\n.xml li, .xml .li1 {color: #DDD;}\n.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.xml .es0 {color: #000099; font-weight: bold;}\n.xml .br0 {color: #66cc66;}\n.xml .sy0 {color: #66cc66;}\n.xml .st0 {color: #ff0000;}\n.xml .sc-1 {color: #808080; font-style: italic;}\n.xml .sc0 {color: #00bbdd;}\n.xml .sc1 {color: #ddbb00;}\n.xml .sc2 {color: #339933;}\n.xml .sc3 {color: #009900;}\n.xml .re0 {color: #000066;}\n.xml .re1 {color: #000000; font-weight: bold;}\n.xml .re2 {color: #000000; font-weight: bold;}\n.xml span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"xml\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;html<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;title<span class=\"re2\">&gt;<\/span><\/span><\/span>Test rotate page<span class=\"sc3\"><span class=\"re1\">&lt;\/title<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;link<\/span> <span class=\"re0\">rel<\/span>=<span class=\"st0\">&quot;stylesheet&quot;<\/span> <span class=\"re0\">href<\/span>=<span class=\"st0\">&quot;rotate.css&quot;<\/span> <span class=\"re2\">\/&gt;<\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;body<\/span> <span class=\"re0\">style<\/span>=<span class=\"st0\">&quot;background-color: grey; border: 1px solid black&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;h1<span class=\"re2\">&gt;<\/span><\/span><\/span>Rotate a page with CSS<span class=\"sc3\"><span class=\"re1\">&lt;\/h1<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>This is a test.<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/body<span class=\"re2\">&gt;<\/span><\/span><\/span>\n<span class=\"sc3\"><span class=\"re1\">&lt;\/html<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/205\/rev-raw\/f04135b9a4acf70893aed6255e997a6df3a4ef52\/test.htm\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/205#test.htm\">test.htm<\/a>\n <\/div>\n<\/div>\n<\/div>\n"}