效果十分好看
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 3D正方体旋转动画演示地址</title> <style> /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "201C" "201D" "2018" "2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } </style> <style> body { color: #333; padding: 20px; text-align: center; font-family: Arial; } .separator { margin-top: 40px; } .twitter { color: #FFF; text-decoration: none; border-radius: 4px; background: #00ACED; display: inline-block; padding: 10px 8px; margin-bottom: 15px; font-weight: bold; } /* 3D Cube */ .space3d { perspective: 1000px; 250px; height: 250px; text-align: center; display: inline-block; } ._3dbox { display: inline-block; transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; position: relative; 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(15deg); } ._3dface { overflow: hidden; position: absolute; border: 1px solid #888; background: #FFF; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); color: #333; line-height: 250px; opacity: 0.8; } ._3dface--front { 250px; height: 250px; transform: translate3d(0, 0, 125px); } ._3dface--top { 250px; height: 250px; transform: rotateX(90deg) translate3d(0, 0, 125px); } ._3dface--bottom { 250px; height: 250px; transform: rotateX(-90deg) translate3d(0, 0, 125px); } ._3dface--left { 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(-90deg) translate3d(0, 0, 125px); } ._3dface--right { 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(90deg) translate3d(0, 0, 125px); } ._3dface--back { 250px; height: 250px; transform: rotateY(180deg) translate3d(0, 0, 125px); } #radio-left:checked ~ .space3d ._3dbox { transform: rotateY(90deg); } #radio-right:checked ~ .space3d ._3dbox { transform: rotateY(-90deg); } #radio-bottom:checked ~ .space3d ._3dbox { transform: rotateX(90deg); } #radio-top:checked ~ .space3d ._3dbox { transform: rotateX(-90deg); } #radio-back:checked ~ .space3d ._3dbox { transform: rotateY(180deg); } ._3dface--front { background: url(1.jpg); background-size: 100%; } ._3dface--left { background: url(2.jpg); background-size: auto 100%; } ._3dface--right { background: url(3.jpg); background-size: auto 100%; } ._3dface--top { background: url(4.jpg); background-size: auto 100%; } ._3dface--bottom { background: url(5.jpg); background-size: auto 100%; } ._3dface--back { background: url(6.jpg); background-size: auto 100%; } </style> <script src="js/prefixfree.min.js"></script> </head> <body> <!-- CONTROLS --> <input type="radio" checked id="radio-front" name="select-face"/> <input type="radio" id="radio-left" name="select-face"/> <input type="radio" id="radio-right" name="select-face"/> <input type="radio" id="radio-top" name="select-face"/> <input type="radio" id="radio-bottom" name="select-face"/> <input type="radio" id="radio-back" name="select-face"/> <div class="separator"></div> <div class="space3d"> <div class="_3dbox"> <div class="_3dface _3dface--front"></div> <div class="_3dface _3dface--top"></div> <div class="_3dface _3dface--bottom"></div> <div class="_3dface _3dface--left"></div> <div class="_3dface _3dface--right"></div> <div class="_3dface _3dface--back"></div> </div> </div> <div class="separator"></div> <br><br> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>