Previous chapter (CSS3 Effects - Gradients)Next chapter (CSS3 Effects - Animations)

CSS Transform and Rotate

CSS Transforms offers you the possibility to scale, rotate, reposition and skew an element through CSS. We can now combine this with CSS Transitions to create a nice example that will both scale and rotate an element when hovered

Other examples in Transitions (CSS3 Effects)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
        .wgmenuitem
        {
            position: relative;
            display: inline-block;
            border: 1px dashed #000;
            padding: 5px;
            background: #ffffa2;
            height: 20px;
            opacity: 0.3;
            text-decoration: none;
            opacity: 0.3;
            -moz-transition: all 1s ease;
            -webkit-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
        }
        
        .wgmenuitem:hover
        {
            opacity: 1;
            -moz-transform: scale(2) rotate(30deg) translate(50px);
            -webkit-transform: scale(1.2) rotate(30deg) translate(50px);
            -o-transform: scale(2) rotate(30deg) translate(50px);
            transform: scale(2) rotate(30deg) translate(50px);
        }
    </style>
</head>
<body>
    <h3>
        Please activate the menu
    </h3>
    <ul>
        <li class="wgmenuitem">WebGrid Menu 1</li>
        <li class="wgmenuitem">WebGrid Menu 2</li>
        <li class="wgmenuitem">WebGrid Menu 3</li>
    </ul>
</body>
</html>

^3.5

^3.1

^4.0

^10.0

^10.5

CSS Transform and Rotate

Useful Information