root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A 3D flipping widget</title>

    <script src="js/modernizr.js"></script>
    <script>
      Modernizr.addTest('svgbg', document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1'));
    </script>
    <!-- We'll put styles from the menu example in a separate file and re-use
         them for this example. -->
    <link rel="stylesheet" href="css/menu.css">
    <style>
        .csstransforms3d.classlist body {
            -webkit-perspective: 1000px;
                    perspective: 1000px;
        }

        .csstransforms3d.classlist .flip-wrapper {
            position: relative;
            -webkit-transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
            -webkit-transition: -webkit-transform .25s ease-in-out;
               -moz-transition: -moz-transform .25s ease-in-out;
                    transition: transform .25s ease-in-out;
            -webkit-transform: rotateY(0);
               -moz-transform: rotateY(0);
                    transform: rotateY(0);
        }
        /**
        * Rules common to the two sides of the widget.
        * 1. We set the backface visibility to hidden, so that we don't need to
        *    worry about the back of the "cards" shining through.
        */
        .csstransforms3d.classlist .flip-b,
        .csstransforms3d.classlist .flip-a {
            box-sizing: border-box;
            -webkit-backface-visibility: hidden; /* 1 */
               -moz-backface-visibility: hidden; /* 1 */
                    backface-visibility: hidden; /* 1 */
        }
        /**
        * The backside of the widget.
        * 1. Set the card to be absolutely positioned inside the parent, and
        *    set the top/right/bottom/left props to 0 so that the element stretches
        *    to fill the entire space of the parent (now equal to the space of side A!).
        * 2. Remove any margin.
        * 3. Set the perspective and flip the card -180 degrees, so it ends up 
        *    "behind" side A.
        */
        .csstransforms3d.classlist .flip-b {
            position: absolute; /* 1 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0; /* 2 */
            -webkit-transform: rotateY(-180deg); /* 3 */
               -moz-transform: rotateY(-180deg); /* 3 */
                    transform: rotateY(-180deg); /* 3 */
        }
        /**
        * 1. When the parent has the class indicating flipped state, rotate the
        *    whole widget container 180 degrees.
        */
        .csstransforms3d.classlist .flip-wrapper.is-flipped {
            -webkit-transform: rotateY(180deg); /* 1 */
               -moz-transform: rotateY(180deg); /* 1 */
                    transform: rotateY(180deg); /* 1 */
        }
        /**
        * These two classes are used by the JS to toggle the visibility property
        * in order to prevent the user from tabbing into the side that is hidden.
        * These classes are added/removed in conjunction with the transition-events
        * that are emitted when the widget has rotated - see the JS file if you
        * want to dig deeper!
        */
        .csstransforms3d.classlist .flip-enabled {
            visibility: visible;
        }
        .csstransforms3d.classlist .flip-disabled {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="flip-wrapper menu-wrapper">
        <div class="flip-a menu">
            <h1 class="menu-heading">Top menu choices</h1>
            <ol class="menu-list">
                <li>Capricciosa</li>
                <li>Margherita</li>
                <li>Vesuvio</li>
                <li>Calzone</li>
                <li>Quattro Stagioni</li>
                <li>Pescatore</li>
                <li>Bolognese</li>
                <li>Shawarma</li>
                <li>Mexicana</li>
                <li>Fungi</li>
            </ol>
        </div>

        <div class="flip-b menu-settings">
            <form action="">
                <h2>Show only these pizzas:</h2>
                <ul class="checkboxes">
                    <li>
                        <input type="checkbox" checked name="meat" id="checkbox-meat">
                        <label for="checkbox-meat">Pizzas with meat</label>
                    </li>
                    <li>
                        <input type="checkbox" checked name="fish" id="checkbox-fish">
                        <label for="checkbox-fish">Pizzas with fish or seafood</label>
                    </li>
                    <li>
                        <input type="checkbox" checked name="veg" id="checkbox-veg">
                        <label for="checkbox-veg">Vegetarian pizzas</label>
                    </li>
                </ul>
                <!-- The button for filtering pizzas can presumably be included in
                     the markup, since it could potentially be  -->
                <button type="submit" class="menu-save">Show me pizzas!</button>
            </form>
            

        </div>
    </div>

    <!-- Here, we link to the JS file powering the flippable widget. -->
    <script src="js/flipwidget.js"></script>
    <script>
        window.FlipWidget();
    </script>
</body>
</html>