clngn/gist:6150676

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>くるくる</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        body {
            background: #f8f8f8;
        }

        button {
            background: #fff;
            border: none;
            border-radius: 3px;
            box-shadow: 0 0 2px rgba(0,0,0,0.2);
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            font-size: 120%;
        }

        #content {
            -webkit-perspective: 1600px;
        }

        #button_area {
            width: 200px;
            height: 50px;
            position: relative;
            top: 0;
            left: 0;
            -webkit-transition: -webkit-transform 0.6s;
            -webkit-transform-style: preserve-3d;
        }

        #button_area.fliped {
            -webkit-transform: rotateY(180deg);
        }

        #button_area button {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-backface-visibility: hidden;
        }

        #front {
            background: #3498db;
        }

        #back {
            background: #f39c12;
            -webkit-transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div id="content">
        <div id="button_area" class="flip">
            <button id="front">おもて</button>
            <button id="back">うら</button>
        </div>
        <script>
            $('#button_area button').click(function() {
                if ($('#button_area').hasClass('flip')) {
                    $('#button_area').removeClass('flip').addClass('fliped');
                } else {
                    $('#button_area').removeClass('fliped').addClass('flip');
                }
            });
        </script>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>くるくる</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>
	body {
	background: #f8f8f8;
	}

	button {
	background: #fff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	font-size: 120%;
	}

	#content {
	-webkit-perspective: 1600px;
	}

	#button_area {
	width: 200px;
	height: 50px;
	position: relative;
	top: 0;
	left: 0;
	-webkit-transition: -webkit-transform 0.6s;
	-webkit-transform-style: preserve-3d;
	}

	#button_area.fliped {
	-webkit-transform: rotateY(180deg);
	}

	#button_area button {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	}

	#front {
	background: #3498db;
	}

	#back {
	background: #f39c12;
	-webkit-transform: rotateY(180deg);
	}
	</style>
	</head>
	<body>
	<div id="content">
	<div id="button_area" class="flip">
	<button id="front">おもて</button>
	<button id="back">うら</button>
	</div>
	<script>
	$('#button_area button').click(function() {
	if ($('#button_area').hasClass('flip')) {
	$('#button_area').removeClass('flip').addClass('fliped');
	} else {
	$('#button_area').removeClass('fliped').addClass('flip');
	}
	});
	</script>
	</div>
	</body>
	</html>