jeedy/원통UI.html

## 원통UI.html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 Transform basic</title>
    <script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.dynamic-dom.min.js"></script>
    <script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" ></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js"></script>

    <style>
      * {margin: 0; padding: 0;}
      html, body {
        height: 100%; overflow: hidden;
        background: #141414;
      }

      .image {
        width: 100px;
        height: 60px;

        position: absolute;
        left: 0; top: 0;

        border: 3px solid white;
        box-sizing: border-box;
        background: url("http://placehold.it/100x60");
        background-size: 100% 100%;
      }

      #viewport {
        -webkit-transform: rotateY(-10deg);
        -webkit-transform-style: preserve-3d;
        perspective: 2000px;
        position: relative;
        height: 100%;
        transform: rotateX(-10deg);
        transform-style: preserve-3d;
      }

      #tizen_gallery {
        width: 100px;
        heigth: 60px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: absolute;
        left: 50%; top: 50%;

        margin-left: -50px;
        margin-top: -30px;
      }
    </style>

    <script>
    var isMouseDown = false;
    var originalPosition = {x:0, y: 0};
    var originalRotation = {x:0, y: 0, z:0};
    var originalScale = 1.0;
    var createGalleryPosition = function(){
      var output = "";
      output += "translateY(" + originalPosition.y + "px) ";
      output += "rotateY(" + originalRotation.y + "deg) ";
      return output;
    };

    var createViewportPosition = function(){
      var output = "";
      output += "rotateX(-10deg) ";
      output += "scaleX(" + originalScale +") ";
      output += "scaleY(" + originalScale +") ";
      return output;
    };

    $(window).on({
      mousedown: function (event) {
        isMouseDown = true;

        originalPosition.x = event.screenX;

        event.preventDefault();
      },
      mouseup: function (event) {
        isMouseDown = false;

        event.preventDefault();
      },
      mousemove: function (event) {
        if(isMouseDown){
          var distance = event.screenX - originalPosition.x;
          originalRotation.y += distance;
          originalPosition.y += distance /3;

          $("#tizen_gallery").css("transform", createGalleryPosition());
          $("#viewport").css("transform", createViewportPosition());

          originalPosition.x = event.screenX;
        }

        event.preventDefault();
      },
      mousewheel: function (event) {
        var changeScale = originalScale + event.originalEvent.wheelDeltaY / 1000;

        if (changeScale > 0) {
          originalScale = changeScale;

          $("#tizen_gallery").css("transform", createGalleryPosition());
          $("#viewport").css("transform", createViewportPosition());

          event.preventDefault();
        }
      }

    });

      $(document).ready(function() {

        for( var i = 0 ; i < 200 ; i++){
          var output = "";
          output += "rotateY(" + i * 20 + "deg) ";
          output += "translateY(" + i * 5 + "px) ";
          output += "translateZ(" + 310 + "px) ";

          $("<div></div>").addClass("image").css({
            "width": 100,
            "height": 60,
            "transform": output
          }).appendTo("#tizen_gallery");
        }

      });
    </script>
  </head>
  <body>
    <div id="viewport">
      <div id="tizen_gallery">

      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS3 Transform basic</title>
	<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.dynamic-dom.min.js"></script>
	<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" ></script>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js"></script>

	<style>
	* {margin: 0; padding: 0;}
	html, body {
	height: 100%; overflow: hidden;
	background: #141414;
	}

	.image {
	width: 100px;
	height: 60px;

	position: absolute;
	left: 0; top: 0;

	border: 3px solid white;
	box-sizing: border-box;
	background: url("http://placehold.it/100x60");
	background-size: 100% 100%;
	}

	#viewport {
	-webkit-transform: rotateY(-10deg);
	-webkit-transform-style: preserve-3d;
	perspective: 2000px;
	position: relative;
	height: 100%;
	transform: rotateX(-10deg);
	transform-style: preserve-3d;
	}

	#tizen_gallery {
	width: 100px;
	heigth: 60px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	left: 50%; top: 50%;

	margin-left: -50px;
	margin-top: -30px;
	}
	</style>

	<script>
	var isMouseDown = false;
	var originalPosition = {x:0, y: 0};
	var originalRotation = {x:0, y: 0, z:0};
	var originalScale = 1.0;
	var createGalleryPosition = function(){
	var output = "";
	output += "translateY(" + originalPosition.y + "px) ";
	output += "rotateY(" + originalRotation.y + "deg) ";
	return output;
	};

	var createViewportPosition = function(){
	var output = "";
	output += "rotateX(-10deg) ";
	output += "scaleX(" + originalScale +") ";
	output += "scaleY(" + originalScale +") ";
	return output;
	};

	$(window).on({
	mousedown: function (event) {
	isMouseDown = true;

	originalPosition.x = event.screenX;

	event.preventDefault();
	},
	mouseup: function (event) {
	isMouseDown = false;

	event.preventDefault();
	},
	mousemove: function (event) {
	if(isMouseDown){
	var distance = event.screenX - originalPosition.x;
	originalRotation.y += distance;
	originalPosition.y += distance /3;

	$("#tizen_gallery").css("transform", createGalleryPosition());
	$("#viewport").css("transform", createViewportPosition());

	originalPosition.x = event.screenX;
	}

	event.preventDefault();
	},
	mousewheel: function (event) {
	var changeScale = originalScale + event.originalEvent.wheelDeltaY / 1000;

	if (changeScale > 0) {
	originalScale = changeScale;

	$("#tizen_gallery").css("transform", createGalleryPosition());
	$("#viewport").css("transform", createViewportPosition());

	event.preventDefault();
	}
	}

	});

	$(document).ready(function() {

	for( var i = 0 ; i < 200 ; i++){
	var output = "";
	output += "rotateY(" + i * 20 + "deg) ";
	output += "translateY(" + i * 5 + "px) ";
	output += "translateZ(" + 310 + "px) ";

	$("<div></div>").addClass("image").css({
	"width": 100,
	"height": 60,
	"transform": output
	}).appendTo("#tizen_gallery");
	}

	});
	</script>
	</head>
	<body>
	<div id="viewport">
	<div id="tizen_gallery">

	</div>
	</div>
	</body>
	</html>