Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos | transform:rotate

Rotate elements using CSS3 tranforms.

Syntax

The syntax is very straightforward, simply state how much you want the element to be rotated in degrees (positive for clockwise, negative for anticlockwise).
transform:rotate (n deg);

Usage

transform:rotate(10deg); element will be rotated 10 degrees clockwise
transform:rotate(-5deg); element will be rotated 5 degrees anticlockwise

Examples and Code

Highlight and Rotate a Link

Highlight a link sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu, consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

HTML

  • <p><a class="rotate" href="#">highlight a link</a> sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu, consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.</p>

CSS

  • /**FIRST STYLE THE LINK**/
  • a.rotate{
  • /*style the text for the link*/
  • font-weight: bold;
  • text-decoration: none; /*remove the underline from the link*/
  • text-transform: uppercase;
  • letter-spacing: .1em;
  • color: #fff;
  • /*now the background*/
  • background: #2652ae;
  • margin: 5px 2px; /*allow enough margin to accommodate any box-shadow & rotation*/
  • padding: 2px 5px;
  • /*add a small drop shadow*/
  • -webkit-box-shadow: rgba(51, 51, 51, .75) 0 0 2px;
  • -moz-box-shadow: rgba(51, 51, 51, .75) 0 0 2px;
  • box-shadow: rgba(51, 51, 51, .45) 0 0 2px;
  • /*Rotate the link 2 degrees anti-clockwise*/
  • -webkit-transform: rotate(-2deg);
  • -moz-transform: rotate(-2deg);
  • -o-transform: rotate(-2deg);
  • -ms-transform: rotate(-2deg);
  • transform: rotate(-2deg);
  • -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • }
  • /**NEXT STYLE THE ACTIVE, HOVER & FOCUS STATES OF THE LINK**/
  • a.rotate:active, a.rotate:hover, a.rotate:focus{
  • /*change the background colour*/
  • background: #2c3036;
  • /*remove the rotation*/
  • -webkit-transform: rotate(0deg);
  • -moz-transform: rotate(0deg);
  • -o-transform: rotate(0deg);
  • -ms-transform: rotate(0deg);
  • transform: rotate(0deg);
  • /*slow down the rotation moving effect to stop it looking jumpy*/
  • -webkit-transition: all .15s ease-in-out;
  • -moz-transition: all .15s ease-in-out;
  • -o-transition: all .15s ease-in-out;
  • -ms-transition: all .15s ease-in-out;
  • transition: all .15s ease-in-out;
  • }

Diary Style Date

21 March 2012

HTML

  • <p class="diary">
  • <span class="day">21</span>
  • <span class="month">March</span>
  • <span class="year">2012</span>
  • </p>

CSS

  • /** FIRST STYLE THE PARAGRAPH **/
  • p.diary{
  • font-family: 'Prosto One', cursive; /*Prosto One is available at http://www.google.com/webfonts*/
  • position: relative; /*for more info on positioning see the Support section below*/
  • display: inline-block; /*prevent the paragraph from spanning the width of container. You could instead use a fixed width, but this way is neater*/
  • height: 100px;
  • padding:5px;
  • background: #dcdac6;
  • /*apply a small drop shadow to the date*/
  • -webkit-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
  • -moz-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
  • box-shadow: 3px 3px 4px rgba(99,99,99,.8);
  • /*give the text a drop shadow*/
  • text-shadow: 2px 2px 5px #919191;
  • }
  • /**NEXT STYLE THE DAY, MONTH AND YEAR**/
  • /*Day*/
  • p.diary .day{
  • position: absolute; /*removes the date from the normal flow, allowing the month & year to be wrapped around it*/
  • top: 30px;
    left:30px;
  • font-size: 60px;
  • color: #aa0e3a;
  • }
  • /*Month*/
  • p.diary .month{
  • position: relative;
  • top: 65px; /*size of .day font and its shadow*/
    left: 20px;
    font-size:25px;
  • color: #3b788c;
  • }
  • /*Year*/
  • p.diary .year{
  • position: relative;
  • display: inline-block;
  • top: 40px;
    left:0;
    font-size:35px;
  • color: #ca4b29;
  • /*rotate the year by 90 degrees anticlockwise*/
  • -webkit-transform: rotate(-90deg);
  • -moz-transform: rotate(-90deg);
  • -o-transform: rotate(-90deg);
  • -ms-transform: rotate(-90deg);
  • transform: rotate(-90deg);
  • }

Notes, Browser Support and Prefixes

Postioning

Some of the demos use postition:absolute together with position:relative, so here's a brief explanation...
position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right
position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page
position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.

See a further explanation and example of using relative and absolute positioning together.

Support

transform:rotate is supported by all the latest browsers, with the following prefixes. There is no direct support in Internet Explorer 8 or earlier.

Prefixes

  • Opera: -o-transform:rotate();
  • Firefox: -moz-transform:rotate();
  • Chrome and Safari: -webkit-transform:rotate();
  • Internet Explorer 9 : -ms-transform:rotate();
  • Internet Explorer 8 and earlier : requires the use of Microsoft'sMatrix Filter.

More CSS3 Demos This Way