css3 3D.html

div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding: 8px 10px 0; font: 13.34px/1.4 helvetica, arial, freesans, clean, sans-serif; width: 452px; background-color: #fff }
div.oembedall-githubrepos .oembedall-body { background: -webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF)); border-top: 1px solid #EEE; margin-left: -10px; margin-top: 8px; padding: 5px 10px; width: 100% }
div.oembedall-githubrepos h3 { font-size: 14px; margin: 0; padding-left: 18px; white-space: nowrap }
div.oembedall-githubrepos p.oembedall-description { color: #444; font-size: 12px; margin: 0 0 3px }
div.oembedall-githubrepos p.oembedall-updated-at { color: #888; font-size: 11px; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats { border: none; float: right; font-size: 11px; font-weight: 700; padding-left: 15px; position: relative; z-index: 5; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats li { border: none; color: #666; display: inline-block; list-style-type: none; margin: 0 !important }
div.oembedall-githubrepos ul.oembedall-repo-stats li a { background-color: transparent; border: none; color: #666 !important; background-position: 5px -2px; background-repeat: no-repeat; border-left: 1px solid #DDD; display: inline-block; height: 21px; line-height: 21px; padding: 0 5px 0 23px }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a { border-left: medium none; margin-right: -3px }
div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover { background: 5px -27px no-repeat #4183C4; color: #FFF !important; text-decoration: none }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover { }
ul.oembedall-repo-stats li:last-child a:hover { }
span.oembedall-closehide { background-color: #aaa; cursor: pointer; margin-right: 3px }
div.oembedall-container { margin-top: 5px; text-align: left }
.oembedall-ljuser { font-weight: 700 }
.oembedall-ljuser img { vertical-align: bottom; border: 0; padding-right: 1px }
.oembedall-stoqembed { border-bottom: 1px dotted #999; float: left; overflow: hidden; width: 730px; line-height: 1; background: #FFF; color: #000; font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif; font-size: 80%; text-align: left; margin: 0; padding: 0 }
.oembedall-stoqembed a { color: #07C; text-decoration: none; margin: 0; padding: 0 }
.oembedall-stoqembed a:hover { text-decoration: underline }
.oembedall-stoqembed a:visited { color: #4A6B82 }
.oembedall-stoqembed h3 { font-family: Trebuchet MS, Liberation Sans, DejaVu Sans, sans-serif; font-size: 130%; font-weight: 700; margin: 0; padding: 0 }
.oembedall-stoqembed .oembedall-reputation-score { color: #444; font-size: 120%; font-weight: 700; margin-right: 2px }
.oembedall-stoqembed .oembedall-user-info { height: 35px; width: 185px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32 { float: left; height: 32px; width: 32px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-details { float: left; margin-left: 5px; overflow: hidden; white-space: nowrap; width: 145px }
.oembedall-stoqembed .oembedall-question-hyperlink { font-weight: 700 }
.oembedall-stoqembed .oembedall-stats { background: #EEE; margin: 0 0 0 7px; padding: 4px 7px 6px; width: 58px }
.oembedall-stoqembed .oembedall-statscontainer { float: left; margin-right: 8px; width: 86px }
.oembedall-stoqembed .oembedall-votes { color: #555; padding: 0 0 7px; text-align: center }
.oembedall-stoqembed .oembedall-vote-count-post { font-size: 240%; color: #808185; display: block; font-weight: 700 }
.oembedall-stoqembed .oembedall-views { color: #999; padding-top: 4px; text-align: center }
.oembedall-stoqembed .oembedall-status { margin-top: -3px; padding: 4px 0; text-align: center; background: #75845C; color: #FFF }
.oembedall-stoqembed .oembedall-status strong { color: #FFF; display: block; font-size: 140% }
.oembedall-stoqembed .oembedall-summary { float: left; width: 635px }
.oembedall-stoqembed .oembedall-excerpt { line-height: 1.2; margin: 0; padding: 0 0 5px }
.oembedall-stoqembed .oembedall-tags { float: left; line-height: 18px }
.oembedall-stoqembed .oembedall-tags a:hover { text-decoration: none }
.oembedall-stoqembed .oembedall-post-tag { background-color: #E0EAF1; border-bottom: 1px solid #3E6D8E; border-right: 1px solid #7F9FB6; color: #3E6D8E; font-size: 90%; line-height: 2.4; margin: 2px 2px 2px 0; padding: 3px 4px; text-decoration: none; white-space: nowrap }
.oembedall-stoqembed .oembedall-post-tag:hover { background-color: #3E6D8E; border-bottom: 1px solid #37607D; border-right: 1px solid #37607D; color: #E0EAF1 }
.oembedall-stoqembed .oembedall-fr { float: right }
.oembedall-stoqembed .oembedall-statsarrow { background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3"); background-repeat: no-repeat; overflow: hidden; background-position: 0 -435px; float: right; height: 13px; margin-top: 12px; width: 7px }
.oembedall-facebook1 { border: 1px solid #1A3C6C; padding: 0; font: 13.34px/1.4 verdana; width: 500px }
.oembedall-facebook2 { background-color: #627add }
.oembedall-facebook2 a { color: #e8e8e8; text-decoration: none }
.oembedall-facebookBody { background-color: #fff; vertical-align: top; padding: 5px }
.oembedall-facebookBody .contents { display: inline-block; width: 100% }
.oembedall-facebookBody div img { float: left; margin-right: 5px }
div.oembedall-lanyard { background-attachment: scroll; background-color: transparent; background-image: none; border-width: 0; color: #112644; display: block; float: left; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 16px; height: 253px; line-height: 19px; margin: 0; max-width: none; min-height: 0; outline: #112644 0; padding: 0; position: relative; text-align: left; vertical-align: baseline; width: 804px }
div.oembedall-lanyard .tagline { font-size: 1.5em }
div.oembedall-lanyard .wrapper { overflow: hidden; clear: both }
div.oembedall-lanyard .split { float: left; display: inline }
div.oembedall-lanyard .prominent-place .flag:active,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:hover,div.oembedall-lanyard .prominent-place .flag:link,div.oembedall-lanyard .prominent-place .flag:visited { float: left; display: block; width: 48px; height: 48px; position: relative; top: -5px; margin-right: 10px }
div.oembedall-lanyard .place-context { font-size: .889em }
div.oembedall-lanyard .prominent-place .sub-place { display: block }
div.oembedall-lanyard .prominent-place { font-size: 1.125em; line-height: 1.1em; font-weight: 400 }
div.oembedall-lanyard .main-date { color: #8CB4E0; font-weight: 700; line-height: 1.1 }
div.oembedall-lanyard .first { width: 48.57%; margin: 0 0 0 2.857% }
.mermaid .label { color: #333 }
.node circle,.node polygon,.node rect { }
.edgePath .path { }
.cluster rect { }
.cluster text { }
.actor { }
text.actor { }
.actor-line { }
.messageLine0 { }
.messageLine1 { }
#arrowhead { }
#crosshead path { }
.messageText { }
.labelBox { }
.labelText,.loopText { }
.loopLine { }
.note { }
.noteText { font-family: "trebuchet ms", verdana, arial; font-size: 14px }
.section { opacity: .2 }
.section0,.section2 { }
.section1,.section3 { opacity: .2 }
.sectionTitle0,.sectionTitle1,.sectionTitle2,.sectionTitle3 { }
.sectionTitle { font-size: 11px }
.grid .tick { opacity: .3 }
.grid path { }
.today { }
.task { }
.taskText { font-size: 11px }
.taskTextOutsideRight { font-size: 11px }
.taskTextOutsideLeft { font-size: 11px }
.taskText0,.taskText1,.taskText2,.taskText3 { }
.task0,.task1,.task2,.task3 { }
.taskTextOutside0,.taskTextOutside1,.taskTextOutside2,.taskTextOutside3 { }
.active0,.active1,.active2,.active3 { }
.activeText0,.activeText1,.activeText2,.activeText3 { }
.done0,.done1,.done2,.done3 { }
.doneText0,.doneText1,.doneText2,.doneText3 { }
.crit0,.crit1,.crit2,.crit3 { }
.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3 { }
.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3 { cursor: pointer }
.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3,.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3 { }
.titleText { font-size: 18px }
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px }
html { height: 100% }
body { margin: 0 !important; padding: 5px 20px 26px !important; background-color: #fff; font-family: "Lucida Grande", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; font-size: .9em }
br,h1,h2,h3,h4,h5,h6 { clear: both }
hr.page { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC") repeat-x; border: 0; height: 3px; padding: 0 }
hr.underscore { border-top-style: dashed !important }
body>:first-child { margin-top: 0 !important }
img.plugin { }
iframe { border: 0 }
figure { }
kbd { border: 1px solid #aaa; background-color: #f9f9f9; background-image: linear-gradient(top,#eee,#f9f9f9,#eee); padding: 1px 3px; font-family: inherit; font-size: .85em }
.oembeded .oembed_photo { display: inline-block }
img[data-echo] { margin: 25px 0; width: 100px; height: 100px; background: url("../img/ajax.gif") center center no-repeat #fff }
.spinner { display: inline-block; width: 10px; height: 10px; margin-bottom: -.1em; border: 2px solid rgba(0,0,0,.5); border-top-color: transparent }
.spinner::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 0; border: 4px solid transparent; border-bottom-color: rgba(0,0,0,.5) }
p.toc { margin: 0 !important }
p.toc ul { padding-left: 10px }
p.toc>ul { padding: 10px; margin: 0 10px; display: inline-block; border: 1px solid #ededed }
p.toc li,p.toc ul { list-style-type: none }
p.toc li { width: 100%; padding: 0; overflow: hidden }
p.toc li a::after { content: "." }
p.toc li a::before { content: "• " }
p.toc h5 { text-transform: uppercase }
p.toc .title { float: left; padding-right: 3px }
p.toc .number { margin: 0; float: right; padding-left: 3px; background: #fff; display: none }
input.task-list-item { margin-left: -1.62em }
.markdown { font-family: "Hiragino Sans GB", "Microsoft YaHei", STHeiti, SimSun, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", AppleSDGothicNeo-Medium, "Malgun Gothic", Verdana, Tahoma, sans-serif; padding: 20px }
.markdown a { text-decoration: none; vertical-align: baseline }
.markdown a:hover { text-decoration: underline }
.markdown h1 { font-size: 2.2em; font-weight: 700; margin: 1.5em 0 1em }
.markdown h2 { font-size: 1.8em; font-weight: 700; margin: 1.275em 0 .85em }
.markdown h3 { font-size: 1.6em; font-weight: 700; margin: 1.125em 0 .75em }
.markdown h4 { font-size: 1.4em; font-weight: 700; margin: .99em 0 .66em }
.markdown h5 { font-size: 1.2em; font-weight: 700; margin: .855em 0 .57em }
.markdown h6 { font-size: 1em; font-weight: 700; margin: .75em 0 .5em }
.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child { margin-top: 0 }
.markdown hr { border: 1px solid #ccc }
.markdown p { margin: 1em 0 }
.markdown ol { list-style-type: decimal }
.markdown li { display: list-item; line-height: 1.4em }
.markdown blockquote { margin: 1em 20px }
.markdown blockquote>:first-child { margin-top: 0 }
.markdown blockquote>:last-child { margin-bottom: 0 }
.markdown blockquote cite::before { content: "— " }
.markdown .code { }
.markdown pre { border: 1px solid #ccc; overflow: auto; padding: .5em }
.markdown pre code { border: 0; display: block }
.markdown pre>code { font-family: Consolas, Inconsolata, Courier, monospace; font-weight: 700; white-space: pre; margin: 0 }
.markdown code { border: 1px solid #ccc; padding: 0 5px; margin: 0 2px }
.markdown img { max-width: 100% }
.markdown mark { color: #000; background-color: #fcf8e3 }
.markdown table { padding: 0; border-collapse: collapse; border-spacing: 0; margin-bottom: 16px }
.markdown table tr td,.markdown table tr th { border: 1px solid #ccc; margin: 0; padding: 6px 13px }
.markdown table tr th { font-weight: 700 }
.markdown table tr th>:first-child { margin-top: 0 }
.markdown table tr th>:last-child { margin-bottom: 0 }
.markdown table tr td>:first-child { margin-top: 0 }
.markdown table tr td>:last-child { margin-bottom: 0 }
.haroopad { padding: 20px; color: #222; font-size: 15px; font-family: "Roboto Condensed", Tauri, "Hiragino Sans GB", "Microsoft YaHei", STHeiti, SimSun, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", AppleSDGothicNeo-Medium, "Malgun Gothic", Verdana, Tahoma, sans-serif; background: #fff; line-height: 1.6 }
.haroopad a { color: #3269a0 }
.haroopad a:hover { color: #4183c4 }
.haroopad h2 { border-bottom: 1px solid #e6e6e6 }
.haroopad h6 { color: #777 }
.haroopad hr { border: 1px solid #e6e6e6 }
.haroopad blockquote>code,.haroopad h1>code,.haroopad h2>code,.haroopad h3>code,.haroopad h4>code,.haroopad h5>code,.haroopad h6>code,.haroopad li>code,.haroopad p>code,.haroopad td>code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 85%; background-color: rgba(0,0,0,.02); padding: .2em .5em; border: 1px solid #efefef }
.haroopad pre>code { font-size: 1em; letter-spacing: -1px; font-weight: 700 }
.haroopad blockquote { border-left: 4px solid #e6e6e6; padding: 0 15px; color: #777 }
.haroopad table { background-color: #fafafa }
.haroopad table tr td,.haroopad table tr th { border: 1px solid #e6e6e6 }
.haroopad table tr:nth-child(2n) { background-color: #f2f2f2 }
.hljs { display: block; padding: .5em; background: #fdf6e3; color: #657b83 }
.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.lisp .hljs-string { color: #93a1a1 }
.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title { color: #859900 }
.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula { color: #2aa198 }
.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal { color: #268bd2 }
.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number { color: #b58900 }
.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string { color: #cb4b16 }
.hljs-deletion,.hljs-important { color: #dc322f }
.hljs-link_label { color: #6c71c4 }
.tex .hljs-formula { background: #eee8d5 }
.MathJax_Hover_Frame { border: 1px solid #A6D !important; display: inline-block; position: absolute }
.MathJax_Hover_Arrow { position: absolute; width: 15px; height: 11px; cursor: pointer }
#MathJax_About { position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: #DDD; color: #000; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
.MathJax_Menu { position: absolute; background-color: #fff; color: #000; width: auto; padding: 2px; border: 1px solid #CCC; margin: 0; cursor: default; font: menu; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
.MathJax_MenuItem { padding: 2px 2em; background: 0 0 }
.MathJax_MenuArrow { position: absolute; right: .5em; color: #666 }
.MathJax_MenuActive .MathJax_MenuArrow { color: #fff }
.MathJax_MenuArrow.RTL { left: .5em; right: auto }
.MathJax_MenuCheck { position: absolute; left: .7em }
.MathJax_MenuCheck.RTL { right: .7em; left: auto }
.MathJax_MenuRadioCheck { position: absolute; left: 1em }
.MathJax_MenuRadioCheck.RTL { right: 1em; left: auto }
.MathJax_MenuLabel { padding: 2px 2em 4px 1.33em; font-style: italic }
.MathJax_MenuRule { border-top: 1px solid #CCC; margin: 4px 1px 0 }
.MathJax_MenuDisabled { color: GrayText }
.MathJax_MenuActive { background-color: Highlight; color: HighlightText }
.MathJax_Menu_Close { position: absolute; width: 31px; height: 31px; top: -15px; left: -15px }
#MathJax_Zoom { position: absolute; background-color: #F0F0F0; overflow: auto; display: block; z-index: 301; padding: .5em; border: 1px solid #000; margin: 0; font-weight: 400; font-style: normal; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none }
#MathJax_ZoomOverlay { position: absolute; left: 0; top: 0; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: #fff; opacity: 0 }
#MathJax_ZoomFrame { position: relative; display: inline-block; height: 0; width: 0 }
#MathJax_ZoomEventTrap { position: absolute; left: 0; top: 0; z-index: 302; display: inline-block; border: 0; padding: 0; margin: 0; background-color: #fff; opacity: 0 }
.MathJax_Preview { color: #888 }
#MathJax_Message { position: fixed; left: 1px; bottom: 2px; background-color: #E6E6E6; border: 1px solid #959595; margin: 0; padding: 2px 8px; z-index: 102; color: #000; font-size: 80%; width: auto; white-space: nowrap }
#MathJax_MSIE_Frame { position: absolute; top: 0; left: 0; width: 0; z-index: 101; border: 0; margin: 0; padding: 0 }
.MathJax_Error { color: #C00; font-style: italic }
footer { position: fixed; font-size: .8em; text-align: right; bottom: 0; margin-left: -25px; height: 20px; width: 100% }

css3 3D变形 transfrom初学

这个礼拜学了css3 3d，感觉到css无穷的魅力，可以通过几个特定的代码符号创建出3D效果的页面。

透视

一个元素需要一个透视点才能激活3D空间，有两种方法可以得到透视点（视点，焦距）：
1.直接书写perspective
perspective: 600;
2.transfrom书写
transfrom:perspective(600px);
这两种发放都能实现
3.perspective-origin可以实现视角的转换默认为正中心：
好几种设置方式：perspective-origin:center center``perspective-origin:50% 50%还可以设置px；
一个页面想实现3d效果必须加上这一句
transform-style: preserve-3d;才能实现3D效果以上元素缺一不少；

transfrom

  • transfrom：transform有三种转变方法；
  • 旋转（rotate）：rotateX()旋转X轴 rotateY()旋转Y轴 rotateZ()旋转Z轴
  • 缩放（scale）大小缩放效果跟2D效果一样
  • 移动（transtate）transtate（Z）前后移动。

用css3书写3D效果上面那两部缺一不可；
现在用几个实例来个大家验证一下css3 3D效果，让大家能够更好的理解css3 3D

卡牌反转效果

这个案例纯js就能写出来
首先HTML排版

<div class="box">
    <div class="box1 box11"></div>
    <div class="box1 box12"></div>
  </div>

最简单的几个DIV排版
css代码如下

body{
    transform-style:preserve-3d;//创建3d页面
    perspective:500px;
    background:#81b7c1;
}
.box{
  width:200px;
  height:200px;
  margin:50px auto;
  transform-style:preserve-3d;
  position:relative;
  transform:rotateY(0deg);
  transition:transform 0.5s;
}
.box1{
  width:200px;
  height:200px;
  position:absolute;
  line-height:200px;
  font-size:100px;
  text-align:center;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
}
.box:hover{
  transform:rotateY(180deg)
}
.box11{
  background:url(../images/3.jpg) no-repeat;
  background-size:100%;
}
.box12{
  background:url(../images/4.jpg) no-repeat;
  background-size:100%;
  transform:rotateY(180deg);
  backface-visibility: hidden;//隐藏背面
}

上边用到了刚才的transfrom几个属性

立方体


相信这个案例大家对css3 3D的认识更为深切

<div class="cude">
    <div class="box">
      <div class="box1 front"></div>
      <div class="box1 back"></div>
      <div class="box1 left"></div>
      <div class="box1 right"></div>
      <div class="box1 top"></div>
      <div class="box1 bottom"></div>
    </div>
  </div>

css排版


body{
  background-color:rgba(46, 112, 72, 0.63);
}
.cude{
  perspective:500px;
  transform-style:preserve-3d;
}
.box{
  transform-style:preserve-3d;
  width:200px;
  height:200px;
  margin:200px auto;
  position:relative;
  transition:transform 1s;
}
.box:hover{
  transform:rotateX(1800deg) rotateY(360deg);  translateX(100px);
}
.box .box1{
  position:absolute;
  width:200px;
  height:200px;
  line-height:200px;
  font-size:100px;
  text-align:center;
  opacity:1;
}
.box .left{
  background-image:url(../images/1.jpg);
  background-size:100%;
  transform: rotateY(-90deg) translateZ(100px);
}
.box .right{
  background-image:url(../images/2.jpg);
  background-size:100%;
  transform: rotateY(90deg) translateZ(100px);
}
.box .top{
  background-image:url(../images/3.jpg);
  background-size:100%;
  transform: rotateX(90deg) translateZ(100px);
}
.box .bottom{
  background-image:url(../images/4.jpg);
  background-size:100%;
  transform: rotateX(-90deg) translateZ(100px);
}
.box .back{
  background-image:url(../images/5.jpg);
  background-size:100%;
  transform: translateZ(-100px) rotateY(180deg) rotateX(-180deg);
}
.box .front{
  background-image:url(../images/6.jpg);
  background-size:100%;
  transform: translateZ(100px);
}

上边用到了几张图片大家是不是对css3 3D更为深切啦!
最后，学习css3 3D能让大家更好的理解3D效果，增长见识，开拓视野。

css3 3D变形 入门（一）的更多相关文章

  1. css3 3d初入门（一）

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

  2. CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

    2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...

  3. HTML5培训入门基础知识了解CSS3 3D属性

    CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS3中的 ...

  4. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  5. 3D变形旋转

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  7. 15：CSS3 3D

    15:CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS ...

  8. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  9. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

随机推荐

  1. xCode中如何安装旧的模拟器

    http://blog.csdn.net/cmengzhongren/article/details/50414493 这里给出如何把老版本的SDK加入到新的Xcode中的方法.其实很简单,就是将老版 ...

  2. FZU 2087 统计树边

    这题第一直觉就是和CF第三次教育场的E题是一样的, http://codeforces.com/contest/609/problem/E 然后直接拉过来代码改了改,提交返回MLE.FZU内存开的小, ...

  3. mongodb 压缩——3.0+支持zlib和snappy

    转自:https://scalegrid.io/blog/enabling-data-compression-in-mongodb-3-0/ MongoDB 3.0 with the wired ti ...

  4. 比较实用的webpack配置代码

    var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...

  5. November 11th 2016 Week 46th Friday

    Keep in mind that neither success nor failure is ever final. 无论成败,皆非定局. The final is not coming, but ...

  6. Android SQLite 加入自定义函数

    SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...

  7. ucos任务控制块详解

    Ucos实现多任务的基础包括几个方面:任务控制块,任务堆栈,中断,任务优先级,一一说起 首先,任务控制块的结构如下 //系统在运行一个任务的时候,按照任务的优先级获取任务控制块,再在任务堆栈中获得任务 ...

  8. SD卡初始化以及命令详解

    SD卡是嵌入式设备中很常用的一种存储设备,体积小,容量大,通讯简单,电路简单所以受到很多设备厂商的欢迎,主要用来记录设备运行过程中的各种信息,以及程序的各种配置信息,很是方便,有这样几点是需要知道的 ...

  9. java系列--类和对象

    一.成员属性,构造方法,成员方法 1.类名首字母一般大写 2.方法名的首字母一般是小写,使用驼峰法(匈牙利法) myCry, 下划线法 my_cry 3.方法的声明没有函数体(接口,抽象类),数据类型 ...

  10. java web开发中的奇葩事web.xml中context-param中的注释

    同事提交了代码.结果除同事之外,其他人全部编译报错.报错说web.xml中配置的一个bean 没有定义.按照报错提示,各种找,无果. 由于代码全部都是提交到svn主干,之前也没有做过备份,只能一步一步 ...