HTML+CSS+JavaScript实现图片3D展览的示例代码利用CSS3制作简单的3d半透明立方体图片展示使用CSS3实现一个3D相册效果实例CSS3制作炫酷带方向感应的鼠标滑过图片3D动画css3实现超立体3D图片侧翻倾斜效果

CSDN文章
建议用谷歌浏览器打开

 #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-space: nowrap; position: absolute; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .menu { margin: 0px; padding: 0px; left: 0px; top: 6px; color: rgb(51, 51, 51); font-family: "Segoe UI Light", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1em; font-weight: lighter; list-style-type: none; position: relative; cursor: pointer; } .menu li { list-style: none; width: 100px; height: 40px; border-right-color: rgb(221, 221, 221); border-right-width: 1px; border-right-style: solid; position: relative; cursor: pointer; } .menu a { color: rgb(51, 51, 51); line-height: 40px; padding-left: 40px; text-decoration: none; display: block; position: relative; } .menu li a:hover { background: rgb(255, 144, 0); } .menu li a:focus { background: rgb(255, 144, 0); } .menu li a:active { background: rgb(255, 144, 0); } #nav li::before { top: 50%; margin-left: 10px; position: absolute; content: ""; } #nav li::after { top: 50%; margin-left: 10px; position: absolute; content: ""; } #nav li a::before { top: 50%; margin-left: 10px; position: absolute; content: ""; } #nav li a::after { top: 50%; margin-left: 10px; position: absolute; content: ""; } #nav .home a::before { border-width: 8px 7px; border-style: solid; border-color: transparent transparent rgb(51, 51, 51); left: 2px; margin-top: -16px; } #nav .home a::after { border-width: 3px 4px 0px; border-style: solid; border-color: rgb(51, 51, 51) rgb(51, 51, 51) transparent; left: 4px; width: 2px; height: 4px; margin-top: 0px; } #nav .arrow a::before { border-width: 7px 0px 7px 8px; border-style: solid; border-color: transparent rgb(51, 51, 51); left: 8px; margin-top: -7px; } #nav .arrow a::after { background: rgb(51, 51, 51); left: 0px; width: 8px; height: 6px; margin-top: -3px; } #nav .back.arrow a::before { border-width: 7px 8px 7px 0px; left: 0px; } #nav .back.arrow a::after { left: 8px; } #nav .list a::before { background: none; border-width: 6px 0px; border-style: double; border-color: rgb(51, 51, 51); left: 5px; top: 14px; width: 12px; height: 2px; } #nav .list a::after { background: none; border-width: 6px 0px; border-style: double; border-color: rgb(51, 51, 51); left: 1px; top: 14px; width: 2px; height: 2px; } 

 // ===== ge1doot global ===== js文件1 var ge1doot = ge1doot || { json: null, screen: null, pointer: null, camera: null, loadJS: function (url, callback, data) { if (typeof url == "string") url = [url]; var load = function (src) { var script = document.createElement("script"); if (callback) { if (script.readyState){ script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; if (--n === 0) callback(data || false); } } } else { script.onload = function() { if (--n === 0) callback(data || false); } } } script.src = src; document.getElementsByTagName("head")[0].appendChild(script); } for (var i = 0, n = url.length; i < n; i++) load(url[i]); } } // ===== html/canvas container ===== ge1doot.Screen = function (setup) { ge1doot.screen = this; this.elem = document.getElementById(setup.container) || setup.container; this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false; this.style = this.elem.style; this.left = 0; this.top = 0; this.width = 0; this.height = 0; this.cursor = "default"; this.setup = setup; this.resize = function () { var o = this.elem; this.width = o.offsetWidth; this.height = o.offsetHeight; for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) { this.left += o.offsetLeft; this.top += o.offsetTop; } if (this.ctx) { this.elem.width = this.width; this.elem.height = this.height; } this.setup.resize && this.setup.resize(); } this.setCursor = function (type) { if (type !== this.cursor && 'ontouchstart' in window === false) { this.cursor = type; this.style.cursor = type; } } window.addEventListener('resize', function () { ge1doot.screen.resize(); }, false); !this.setup.resize && this.resize(); } // ==== unified touch events handler ==== ge1doot.Pointer = function (setup) { ge1doot.pointer = this; var self = this; var body = document.body; var html = document.documentElement; this.setup = setup; this.screen = ge1doot.screen; this.elem = this.screen.elem; this.X = 0; this.Y = 0; this.Xi = 0; this.Yi = 0; this.bXi 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：HTML5逐步分析实现拖放功能的方法HTML5 拖放（Drag 和 Drop）详解与实例代码HTML5中的拖放实现详解HTML5拖放API实现拖放排序的实例代码HTML5拖放效果的实现代码HTML5 拖放功能实现代码
                                                                
下一篇：利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用HTML5中的网络存储实现方式使用HTML5 IndexDB存储图像和文件的示例HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码