https://github.com/chokcoco/css3-3d-transform

90行代码实现图片旋转木马3D效果
https://github.com/chokcoco/css3-3d-transform

Last synced: 30 days ago
JSON representation

90行代码实现图片旋转木马3D效果

• Host: GitHub
• URL: https://github.com/chokcoco/css3-3d-transform
• Owner: chokcoco
• Created: 2015-07-13T12:27:13.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-07-14T03:24:44.000Z (almost 10 years ago)
• Last Synced: 2023-03-01T18:35:45.457Z (over 2 years ago)
• Language: HTML
• Homepage:
• Size: 191 KB
• Stars: 9
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# css3-3d-transform

仅需关键代码50行实现一个3D类似旋转木马的图片浏览功能

##代码示意

```html

    Css3-3d-transform__实现图片旋转木马3D效果

#doc{

	height: 600px;

	position: relative;

	overflow: hidden;

	background-color: #ddd;

}

#stage{

	width: 1000px;

	margin: 100px auto 0 auto;

	height: 400px;

	-webkit-perspective: 800px;

	   -moz-perspective: 800px;

            perspective: 800px;

	

	-webkit-transition: top .5s;

	position: relative;

}

#container{

	position: absolute;

	width: 128px;

	height: 72px;

	left: 50%;

	top:50%;

	margin-left: -64px;

	margin-top: -36px;

	cursor: pointer;

	-webkit-transition: -webkit-transform 1s;

	   -moz-transition: -moz-transform 1s;

	        transition: transform 1s;

	

	-webkit-transform-style: preserve-3d;

	   -moz-transform-style: preserve-3d;

	        transform-style: preserve-3d;

}

.piece{

	width: 128px;

	overflow: hidden;

	box-shadow: 0 1px 3px rgba(0,0,0,.5);

	-webkit-transition: opacity 1s, -webkit-transform 1s;

       -moz-transition: opacity 1s, -moz-transform 1s;

            transition: opacity 1s, transform 1s;

			

	position: absolute;

	bottom: 0;

}

	


		


			


				

				

				

				

				

				

				

			

		

	


	(function(){

		var indexPiece = 0,

			rotateDeg = 0,

			eleContainer = document.getElementById('container');

		// alert('start');

		eleContainer.addEventListener("click",function(){

			// alert('in');

			rotateDeg = 60*++indexPiece;

			eleContainer.style.transform = "rotateY("+rotateDeg+"deg)";

		})

	})();

```