| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Using transform-origin to rotate text</title>
- <style>
- body {
- font-family: Baskerville, Times, Times New Roman, serif;
- font-size: 1.25em;
- padding: 3em;
- }
- h1 {
- font-weight: 400;
- }
- .rules {
- counter-reset: rulecount 2;
- list-style: none;
- padding: 0;
- margin: 0;
- }
- .rules li {
- line-height: 1.5;
- min-height: 1.75em;
- counter-increment: rulecount;
- max-width: 35em;
- border-left: 1.5em solid #777;
- padding-left: .5em;
- position: relative;
- margin-bottom: .5em;
- }
- .rules li:before {
- position: absolute;
- top: 0;
- left: 0;
- padding-right: .25em;
- display: block;
- color: #fff;
- line-height: 1.5em;
- padding-left: .25em;
- content: '§ ' counter(rulecount);
- -webkit-transform: translate(-100%, -100%) rotate(-90deg);
- -moz-transform: translate(-100%, -100%) rotate(-90deg);
- -ms-transform: translate(-100%, -100%) rotate(-90deg);
- -o-transform: translate(-100%, -100%) rotate(-90deg);
- transform: translate(-100%, -100%) rotate(-90deg);
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- -ms-transform-origin: 100% 100%;
- -o-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- }
- </style>
- </head>
- <body>
- <h1>Fight Club rules</h1>
- <ol class="rules" start="3">
- <li>If someone says ”stop”, goes limp or taps out, the fight is over.</li>
- <li>Only two guys to a fight.</li>
- <li>One fight at a time.</li>
- <li>No shirts, no shoes.</li>
- <li>Fights will go on as long as they have to.</li>
- <li>If this is your first night at FIGHT CLUB, you HAVE to fight.</li>
- </ol>
- </body>
- </html>
|
