HTML5 3D相册 精美 女朋友礼物

【实例简介】
程序员给女朋友做的3D精美相册，让你震撼！ #icon { background: rgb(255, 144, 0); border-radius: 6px 0px 0px; transition:0.6s ease-in-out; left: 65px; top: 6px; width: 40px; height: 40px; overflow: hidden; position: relative; cursor: pointer; -moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s; } #icon div { background: none; position: absolute; } #icon div:nth-child(1) { border-width: 7px 0px 7px 8px; border-style: solid; border-color: transparent rgb(255, 255, 255); left: 20px; top: 50%; width: 0px; height: 0px; margin-top: -7px; position: absolute; } #icon div:nth-child(2) { background: rgb(255, 255, 255); left: 12px; top: 50%; width: 8px; height: 6px; margin-top: -3px; position: absolute; } #nav { top: 10px; width: 100px; height: 0px; position: absolute; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; } #nav-switch { display: none; } #nav .label { display: block; cursor: pointer; } #nav .container { transition:left 0.3s ease-in-out; left: -100px; width: 100%; position: absolute; -moz-transition: left 0.3s ease-in-out 0s; -webkit-transition: left 0.3s ease-in-out 0s; -o-transition: left 0.3s ease-in-out 0s; } #nav .container > div { padding: 0px; width: 50%; float: left; } #nav .container .nav-on { color: rgb(51, 51, 51); padding-left: 0px; } #nav .container .nav-off { width: 40px; height: 40px; padding-right: 10px; } :checked#nav-switch + .label .container { left: 10px; } :checked#nav-switch + .label #icon { background: rgb(0, 101, 203); border-radius: 0px 0px 6px; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } .title { margin: 0px; padding: 0px; left: 170px; top: 2px; height: 40px; color: rgb(51, 51, 51); line-height: 40px; font-family: "Segoe UI Light", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: bold; white-
【实例截图】
【核心代码】
4744302542988939294.rar
├── 3d-album.htm
├── imgs
│   ├── 10.jpg
│   ├── 11.jpg
│   ├── 12.jpg
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── 8.jpg
│   └── 9.jpg
├── more information.htm
└── res
├── ge1doot.js
├── imageTransform3D.js
├── jquery-1.7.2.min.js
└── slider-wb.css

2 directories, 18 files