EX3 Workshop CSS3

<!DOCTYPE html>
<html>
        <head>
                <title> El meu bonic coet</title>
                <meta charset="utf-8">
                <style type="text/css">
                        * {
                                font-family: arial;
                        }
                        .container{
                                width: 600px;
                                height:600px;
                                margin: 0 auto;
                                position:absolute;
                                overflow:hidden;
                        }
                        .universe{
                                position:absolute;
                                top:0;
                                left:0;
                                width:100%;
                                height:100%;
                                background:url(http://hdscreen.me/thumbs/space/digital-art-futuristic-outer-space-2795074-480x320.jpg) no-repeat center center;
                                background-size: 120%
                        }
                        .planet_earth{
                                position:absolute;
                                top:0;
                                left:100;
                                width:100%;
                                height:100%;
                                background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
                                background-size: 15%;
                        }
                        .planet_jupiter{
                                position:relative;
                                width:100%;
                                height:100%;
                                left: -150px;
                                top: -100px;
                                background:url(http://www.alien.de/images/Jupiter.png) no-repeat center center;
                                background-size: 50%;
                        }
                        .moon{
                                position:absolute;
                                width:100%;
                                height:100%;
                                left: 100px;
                                top: 100px;
                                background:url(https://brainstomping.files.wordpress.com/2010/09/majora__s_mask_moon_by_mrespman.png) no-repeat center center;
                                background-size: 10%;
                        }
                        .rocket{
                                position:absolute;
                                top:0;
                                left:0;
                                width:100%;
                                height:100%;
                                background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;
                                -webkit-animation:orbit 3s linear infinite;
                                animation:orbit 1s linear infinite;
                                /* afegeix algo per fer possible la segona part */
                                transition:
                                background-position 4s;
                                all
                        }
                        .container:hover .rocket{
                                /* CODI per fer la segona part */
                                background-position: 200px;
                        }
                        @-webkit-keyframes orbit {
                                /* CODI DE L'ANIMACIO AMB PREFIX -webkit- */
                                from {
                                        -webkit-transform:rotate(0deg);
                                }
                                to {
                                        -webkit-transform:rotate(360deg);
                                }
                        }
                        @keyframes orbit {
                                /* CODI DE L'ANIMACIO sense prefix */
                                from {
                                        transform:rotate(0deg);
                                }
                                to {
                                        transform:rotate(360deg);
                                }
                        }
                </style>
        </head>
        <body>
                <p>
                        Part 1: Aconsegueix fer volar el coet al voltant de la terra.
                </p>

                <p>
                        Part 2: Al fer hover al coet, aquest s'apropa a la terra i segueix orbitant.
                </p>

                <p>
                        Consell: no dubtis en fer proves, la Terra no explotarà si el coet hi impacta.
                </p>

                <p>
                        Consell: Jupiter, la lluna del Majora's Mask i el fons són mera decoració
                </p>

                <div class="container">
                        <div class="universe"></div>
                        <div class="planet_jupiter"></div>
                        <div class="planet_earth"></div>
                        <div class="moon"></div>
                        <div class="rocket"></div>
                </div>
        </body>
</html>