1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 6 7 <title>ãCSSè¿é¶ãè¯è¯é ·ç«ç 3D è§è§ | Coco âs blog</title> 8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 9 10 <meta name="author" content="Coco"> 11 12 13 <meta name="keywords" content="CSS3 3D, perspective,"> 14 <meta name="description" content="åè¿ç¯æç« çç¼ç±æ¯å 为çå°äºè¿ä¸ªé¡µé¢ï¼æ³æççï¼ç§»å¨ç«¯é¡µé¢ï¼ä½¿ç¨æ¨¡æå¨è§çï¼è¿ç¨ CSS3 宿ç 3D è§è§ï¼è½ç¶æä¸äºæ3Dï¼ä½æ¯ä½¿äººç½®èº«äºå ¶ä¸ç交äºä½éªæè§é常æ£ï¼è¿ç¨å¨ç§»å¨ç«¯å¶ä½ä¸äº H5 页é¢å¯è°ååå人ç¼çã并䏿æ¡åçä¹åå¶ä½èµ·æ¥ä¹å¹¶ä¸ç®åºåï¼å¥½å¥½çç ç©¶äºä¸çªåå°ä¸äºå¦ä¹ è¿ç¨å ±äº«ç»å¤§å®¶ã"> 15<meta property="og:type" content="article"> 16<meta property="og:title" content="ãCSSè¿é¶ãè¯è¯é ·ç«ç 3D è§è§ | Coco âs blog"> 17<meta property="og:url" content="http://sbco.cc/2016/09/06/3dview/index.html"> 18<meta property="og:site_name" content="Coco âs blog"> 19<meta property="og:description" content="åè¿ç¯æç« çç¼ç±æ¯å 为çå°äºè¿ä¸ªé¡µé¢ï¼æ³æççï¼ç§»å¨ç«¯é¡µé¢ï¼ä½¿ç¨æ¨¡æå¨è§çï¼è¿ç¨ CSS3 宿ç 3D è§è§ï¼è½ç¶æä¸äºæ3Dï¼ä½æ¯ä½¿äººç½®èº«äºå ¶ä¸ç交äºä½éªæè§é常æ£ï¼è¿ç¨å¨ç§»å¨ç«¯å¶ä½ä¸äº H5 页é¢å¯è°ååå人ç¼çã并䏿æ¡åçä¹åå¶ä½èµ·æ¥ä¹å¹¶ä¸ç®åºåï¼å¥½å¥½çç ç©¶äºä¸çªåå°ä¸äºå¦ä¹ è¿ç¨å ±äº«ç»å¤§å®¶ã"> 20<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203602910-872357369.png"> 21<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203231144-1239156468.png"> 22<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203100269-606257548.png"> 23<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203817676-376329451.png"> 24<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203304144-1233838773.gif"> 25<meta property="og:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203317332-1486414378.gif"> 26<meta property="og:updated_time" content="2016-09-06T13:01:00.399Z"> 27<meta name="twitter:card" content="summary"> 28<meta name="twitter:title" content="ãCSSè¿é¶ãè¯è¯é ·ç«ç 3D è§è§ | Coco âs blog"> 29<meta name="twitter:description" content="åè¿ç¯æç« çç¼ç±æ¯å 为çå°äºè¿ä¸ªé¡µé¢ï¼æ³æççï¼ç§»å¨ç«¯é¡µé¢ï¼ä½¿ç¨æ¨¡æå¨è§çï¼è¿ç¨ CSS3 宿ç 3D è§è§ï¼è½ç¶æä¸äºæ3Dï¼ä½æ¯ä½¿äººç½®èº«äºå ¶ä¸ç交äºä½éªæè§é常æ£ï¼è¿ç¨å¨ç§»å¨ç«¯å¶ä½ä¸äº H5 页é¢å¯è°ååå人ç¼çã并䏿æ¡åçä¹åå¶ä½èµ·æ¥ä¹å¹¶ä¸ç®åºåï¼å¥½å¥½çç ç©¶äºä¸çªåå°ä¸äºå¦ä¹ è¿ç¨å ±äº«ç»å¤§å®¶ã"> 30<meta name="twitter:image" content="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203602910-872357369.png"> 31 32 <link rel="icon" type="image/x-icon" href="/favicon.png"> 33 <link rel="stylesheet" href="/css/uno.css"> 34 <link rel="stylesheet" href="/css/highlight.css"> 35 <link rel="stylesheet" href="/css/archive.css"> 36 <link rel="stylesheet" href="/css/china-social-icon.css"> 37</head> 38<body> 39 <span class="mobile btn-mobile-menu"> 40 <i class="icon icon-list btn-mobile-menu__icon"></i> 41 <i class="icon icon-x-circle btn-mobile-close__icon hidden"></i> 42 </span> 43 44<header class="panel-cover panel-cover--collapsed"> 45 46 <div class="panel-main"> 47 <div class="panel-main__inner panel-inverted"> 48 <div class="panel-main__content"> 49 50 <img src="/images/logo.png" alt="Coco âs blog logo" class="panel-cover__logo logo" title="Click Me!!!"/> 51 52 <h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage">Coco âs blog</a></h1> 53 <hr class="panel-cover__divider" /> 54 55 <p class="panel-cover__description">
56 å°å¹´ä¸ç¥ææ»å³ ä¸ºèµæ°è¯å¼ºè¯´æ 57 </p> 58 <hr class="panel-cover__divider panel-cover__divider--secondary" /> 59 60 <div class="navigation-wrapper"> 61 <nav class="cover-navigation cover-navigation--primary"> 62 <ul class="navigation"> 63 64 65 <li class="navigation__item"><a href="/#blog" title="" class="blog-button">é¦é¡µ</a></li> 66 67 68 <li class="navigation__item"><a href="/about/html/" title="" class="">å ³äº</a></li> 69 70 71 <li class="navigation__item"><a href="/archive" title="" class="">彿¡£</a></li> 72 73 <a target="_blank" href="https://github.com/chokcoco"><li class='navigation__item github' title="To my Github"></li></a> 74 <a target="_blank" href="http://www.cnblogs.com/coco1s/"> <li class='navigation__item'><div class='navigation__item blog' title="To my cnblogs"></div></li></a> 75 </ul> 76 </nav> 77 <!-- ---------------------------- 78To add a new social icon simply duplicate one of the list items from below 79and change the class in the <i> tag to match the desired social network 80and then add your link to the <a>. Here is a full list of social network 81classes that you can use: 82 icon-social-500px 83 icon-social-behance 84 icon-social-delicious 85 icon-social-designer-news 86 icon-social-deviant-art 87 icon-social-digg 88 icon-social-dribbble 89 icon-social-facebook 90 icon-social-flickr 91 icon-social-forrst 92 icon-social-foursquare 93 icon-social-github 94 icon-social-google-plus 95 icon-social-hi5 96 icon-social-instagram 97 icon-social-lastfm 98 icon-social-linkedin 99 icon-social-medium 100 icon-social-myspace 101 icon-social-path 102 icon-social-pinterest 103 icon-social-rdio 104 icon-social-reddit 105 icon-social-skype 106 icon-social-spotify 107 icon-social-stack-overflow 108 icon-social-steam 109 icon-social-stumbleupon 110 icon-social-treehouse 111 icon-social-tumblr 112 icon-social-twitter 113 icon-social-vimeo 114 icon-social-xbox 115 icon-social-yelp 116 icon-social-youtube 117 icon-social-zerply 118 icon-mail 119--------------------------------> 120<!-- add social info here --> 121 122 123 </div> 124 </div> 125 </div> 126 <div class="panel-cover--overlay"></div> 127 </div> 128</header> 129 130 <div class="content-wrapper"> 131 <div class="content-wrapper__inner entry"> 132 133<article class="post-container post-container--single"> 134 <header class="post-header"> 135 <h1 class="post-title">ãCSSè¿é¶ãè¯è¯é ·ç«ç 3D è§è§</h1> 136 137 <div class="post-meta"> 138 <time datetime="2016-09-06" class="post-meta__date date">2016-09-06</time> 139 <span id="busuanzi_container_page_pv"> 140 ⢠é 读éï¼<span id="busuanzi_value_page_pv"></span>ï¼ 141 </span> 142 <span class="post-meta__tags tags"> 143 144 145 • æ ç¾: 146 <font class="tags"> 147 <a class="tags-link" href="/tags/CSS/">CSS</a> 148 </font> 149 150 </span> 151 152 </div> 153 154 </header> 155 156 <section id="post-content" class="article-content post"> 157 <p>åè¿ç¯æç« çç¼ç±æ¯å 为çå°äºè¿ä¸ªé¡µé¢ï¼</p><p><a href="https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1" target="_blank" rel="external">æ³æççï¼ç§»å¨ç«¯é¡µé¢ï¼ä½¿ç¨æ¨¡æå¨è§çï¼</a></p><p>è¿ç¨ CSS3 宿ç 3D è§è§ï¼è½ç¶æä¸äºæ3Dï¼ä½æ¯ä½¿äººç½®èº«äºå ¶ä¸ç交äºä½éªæè§é常æ£ï¼è¿ç¨å¨ç§»å¨ç«¯å¶ä½ä¸äº H5 页é¢å¯è°ååå人ç¼çã</p><p>并䏿æ¡åçä¹åå¶ä½èµ·æ¥ä¹å¹¶ä¸ç®åºåï¼å¥½å¥½çç ç©¶äºä¸çªåå°ä¸äºå¦ä¹ è¿ç¨å ±äº«ç»å¤§å®¶ã<a id="more"></a></p><p>ä¸é¢è¿å ¥æ£æï¼</p><h2 id="3D-ææç¤ºæ"><a href="#3D-ææç¤ºæ" class="headerlink" title="3D ææç¤ºæ"></a>3D ææç¤ºæ</h2><p>ç¾é»ä¸å¦ä¸è§ï¼å ç´è§æåä¸ä¸ä¸è¿°ææè¯´çææï¼</p><iframe height="304" scrolling="no" src="//codepen.io/Chokcoco/embed/mAyRGv/?height=304&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen style="width:100%">See the Pen <a href="https://codepen.io/Chokcoco/pen/mAyRGv/" target="_blank" rel="external">3DView</a> by Chokcoco ( <a href="http://codepen.io/Chokcoco" target="_blank" rel="external">@Chokcoco</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a><br></iframe><p>æå¥½è½ç¹è¿å»ççï¼è¿éæä½¿ç¨äºå¸¦èæ¯è²ç div ä½ä¸ºç¤ºä¾ï¼æä»¬çè§è§å¤äºä¸ä¸ªæ£æ¹ä½ä¸ï¼æ£æ¹ä½çæè½¬å¨ç»è®©æä»¬æäº 3D çæè§ã</p><p>é£ä¹åæ¬çå¾é¿ä»ä¹æ ·å¢ï¼æä»¬æè·ç¦»æè¿ï¼ä¸æ¢ç©¶ç«ï¼</p><iframe height="265" scrolling="no" src="//codepen.io/Chokcoco/embed/KgwqRd/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen style="width:100%">See the Pen <a href="http://codepen.io/Chokcoco/pen/KgwqRd/" target="_blank" rel="external">3DView2</a> by Chokcoco ( <a href="http://codepen.io/Chokcoco" target="_blank" rel="external">@Chokcoco</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a><br></iframe><p>æ¯é¿è¿æ ·çï¼</p><p><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203602910-872357369.png" alt=""></p><p>ç¸è¾äºç¬¬ä¸ç§ææï¼å ¶å®æåçåªæ¯å°æä»¬çè§è§æ¨è¿å°äºæ£æ¹ä½å½ä¸ï¼æäºä¸ç§èº«ä¸´å ¶æ¯çæè§ã</p><p>èåççè¿ç¨ CSS3 ææä¾çä¸äº 3D 屿§ï¼å¾å®¹æå°±è½è¾¾å°ä¸è¿°çææã</p><p>å¶ä½è¿æ ·ä¸ä¸ª 3D å¾å½¢ï¼æå¨ä¹åçæç« å·²ç»å¾è¯¦ç»ç讲述äºè¿ç¨ï¼æå ´è¶£çå¯ä»¥æ³è¿å»ççï¼</p><p><a href="http://www.cnblogs.com/coco1s/p/5414153.html" target="_blank" rel="external">ãCSS3è¿é¶ãé ·ç«ç3Dæè½¬éè§</a></p><h2 id="transform-style-ä¸-perspective"><a href="#transform-style-ä¸-perspective" class="headerlink" title="transform-style ä¸ perspective"></a>transform-style ä¸ perspective</h2><p>åç®åå¤è¿°ä¸ä¸ï¼ä¸»è¦æ¯è¿ç¨å°äºä¸¤ä¸ª CSS 屿§ï¼</p><h3 id="transform-style"><a href="#transform-style" class="headerlink" title="transform-style"></a>transform-style</h3><p>è¦å©ç¨ CSS3 å®ç° 3D çææï¼æä¸»è¦çå°±æ¯åå© transform-style 屿§ã</p><p>transform-style åªæä¸¤ä¸ªå¼å¯ä»¥éæ©ï¼</p><figure class="highlight"><table><tr><td class="gutter"><pre>
158 <span class="line">1</span> 159 <br> 160 <span class="line">2</span> 161 <br> 162 <span class="line">3</span> 163 <br> 164 <span class="line">4</span> 165 <br> 166 <span class="line">5</span> 167 <br> 168 </pre></td><td class="code"><pre> 169 <span class="line">// è¯æ³ï¼</span> 170 <br> 171 <span class="line">transform-style: flat|preserve-3d;</span> 172 <br> 173 <span class="line"></span> 174 <br> 175 <span class="line">transform-style: flat; // é»è®¤ï¼åå ç´ å°ä¸ä¿çå ¶ 3D ä½ç½®</span> 176 <br> 177 <span class="line">transform-style: preserve-3d; // åå ç´ å°ä¿çå ¶ 3D ä½ç½®ã</span> 178 <br> 179 </pre></td></tr></table></figure><p>彿们æå®ä¸ä¸ªå®¹å¨ç transform-style ç屿§å¼ä¸º preserve-3d æ¶ï¼å®¹å¨çå代å ç´ ä¾¿ä¼å ·æ 3D ææï¼è¿æ ·è¯´æç¹æ½è±¡ï¼ä¹å°±æ¯å½åç¶å®¹å¨è®¾ç½®äº preserve-3d å¼åï¼å®çåå ç´ å°±å¯ä»¥ç¸å¯¹äºç¶å ç´ æå¨çå¹³é¢ï¼è¿è¡ 3D åå½¢æä½ã</p><p>å½ç¶å ç´ è®¾ç½®äº transform-style:preserve-3d åï¼å°±å¯ä»¥å¯¹åå ç´ è¿è¡ 3D åå½¢æä½äºï¼3D åå½¢å 2D å形䏿 ·å¯ä»¥ï¼ä½¿ç¨ transform 屿§æ¥è®¾ç½®ï¼æè å¯ä»¥éè¿å¶å®ç彿°æè éè¿ä¸ç»´ç©éµæ¥å¯¹å ç´ ååæä½ï¼</p><ul><li><p>ä½¿ç¨ translateX(length) ãtranslateY(length) ã translateZ(length) æ¥è¿è¡ 3D ä½ç§»æä½ï¼ä¸ 2D æä½ä¸æ ·ï¼å¯¹å ç´ è¿è¡ä½ç§»æä½ï¼ä¹å¯ä»¥å并为 translate3d(x,y,z) è¿ç§åæ³ï¼</p></li><li><p>ä½¿ç¨ scaleX() ãscaleY() ãscaleY() æ¥è¿è¡3D ç¼©æ¾æä½ï¼ä¹å¯ä»¥å并为 scale3d(number,number,number) è¿ç§åæ³ï¼</p></li><li><p>ä½¿ç¨ rotateX(angle) ãrotateY(angle) ãrotateZ(angle) æ¥è¿è¡ 3D æè½¬æä½ï¼ä¹å¯ä»¥å并为 rotate3d(Xangle,Yangle,Zangle) è¿ç§åæ³ã</p></li></ul><h3 id="perspective"><a href="#perspective" class="headerlink" title="perspective"></a>perspective</h3><figure class="highlight"><table><tr><td class="gutter"><pre> 180 <span class="line">1</span> 181 <br> 182 <span class="line">2</span> 183 <br> 184 </pre></td><td class="code"><pre> 185 <span class="line">// è¯æ³</span> 186 <br> 187 <span class="line">perspective: number|none;</span> 188 <br> 189 </pre></td></tr></table></figure><p>perspective 为ä¸ä¸ªå ç´ è®¾ç½®ä¸ç»´éè§çè·ç¦»ï¼ä» ä½ç¨äºå ç´ çå代ï¼è䏿¯å ¶å ç´ æ¬èº«ã</p><p>ç®åæ¥è¯´ï¼å½å ç´ æ²¡æè®¾ç½® perspective æ¶ï¼ä¹å°±æ¯å½ perspective:none/0 æ¶ææå代å ç´ è¢«å缩å¨åä¸ä¸ªäºç»´å¹³é¢ä¸ï¼ä¸å卿¯æ·±çææã</p><p>èå¦æè®¾ç½® perspective åï¼å°ä¼çå°ä¸ç»´çææã</p><p>æä»¬ä¸é¢ä¹æä»¥è½å¤å¨æ£æ¹ä½å¤å´çå°æ£æ¹ä½ï¼ä»¥åæ·±å ¥æ£æ¹ä½å ï¼é½æ¯å 为 <code>perspective</code> è¿ä¸ªå±æ§ãå®è®©æä»¬è½å¤éæ©æ¨è¿è§è§ï¼è¿æ¯è¿ç¦»è§è§ï¼å æ¤ä¾¿æäº 3D çæè§ã</p><h2 id="3D-View页é¢çå¸å±ç»æ"><a href="#3D-View页é¢çå¸å±ç»æ" class="headerlink" title="3D View页é¢çå¸å±ç»æ"></a>3D View页é¢çå¸å±ç»æ</h2><p>为äºå®æè¿æ ·ä¸ä¸ªææï¼éè¦ä¸ä¸ªçµæ´»çå¸å±ï¼å»æ§å¶æ´ä¸ª 3D ææçå±ç¤ºã</p><p>ä¸é¢æ¯æè§å¾æ¯è¾å¥½çä¸ç§æ¹å¼ï¼</p><figure class="highlight html"><table><tr><td class="gutter"><pre> 190 <span class="line">1</span> 191 <br> 192 <span class="line">2</span> 193 <br> 194 <span class="line">3</span> 195 <br> 196 <span class="line">4</span> 197 <br> 198 <span class="line">5</span> 199 <br> 200 <span class="line">6</span> 201 <br> 202 <span class="line">7</span> 203 <br> 204 <span class="line">8</span> 205 <br> 206 <span class="line">9</span> 207 <br> 208 <span class="line">10</span> 209 <br> 210 <span class="line">11</span> 211 <br> 212 <span class="line">12</span> 213 <br> 214 <span class="line">13</span> 215 <br>
216 <span class="line">14</span> 217 <br> 218 <span class="line">15</span> 219 <br> 220 <span class="line">16</span> 221 <br> 222 </pre></td><td class="code"><pre> 223 <span class="line"> 224 <span class="comment"><!-- æå¤å±å®¹å¨ï¼æ§å¶å¾å½¢çä½ç½®å卿´ä¸ªé¡µé¢ä¸çå¸å±--></span> 225 </span> 226 <br> 227 <span class="line"> 228 <span class="tag">< 229 <span class="name">div</span> 230 <span class="attr">class</span>= 231 <span class="string">"container"</span>></span> 232 </span> 233 <br> 234 <span class="line"> 235 <span class="comment"><!-- èå°å±ï¼è®¾ç½® preserve-3d ä¸ perspective è§è· --></span> 236 </span> 237 <br> 238 <span class="line"> 239 <span class="tag">< 240 <span class="name">div</span> 241 <span class="attr">class</span>= 242 <span class="string">"stage"</span>></span> 243 </span> 244 <br> 245 <span class="line"> 246 <span class="comment"><!-- æ§å¶å±ï¼å¨ç»çæ§å¶å±ï¼éè¿è¿ä¸å±å¯ä»¥æ·»å æè½¬å¨ç»æè 触æ¸å¨ç» --></span> 247 </span> 248 <br> 249 <span class="line"> 250 <span class="tag">< 251 <span class="name">div</span> 252 <span class="attr">class</span>= 253 <span class="string">"control"</span>></span> 254 </span> 255 <br> 256 <span class="line"> 257 <span class="comment"><!-- å¾çå±ï¼è£ å ¥æä»¬è¦æ¼æ¥çå¾ç --></span> 258 </span> 259 <br> 260 <span class="line"> 261 <span class="tag">< 262 <span class="name">div</span> 263 <span class="attr">class</span>= 264 <span class="string">"imgWrap"</span>></span> 265 </span> 266 <br> 267 <span class="line"> 268 <span class="tag">< 269 <span class="name">div</span> 270 <span class="attr">class</span>= 271 <span class="string">"img img1"</span>></span> 272 <span class="tag"></ 273 <span class="name">div</span>></span> 274 </span> 275 <br> 276 <span class="line"> 277 <span class="tag">< 278 <span class="name">div</span> 279 <span class="attr">class</span>= 280 <span class="string">"img img2"</span>></span> 281 <span class="tag"></ 282 <span class="name">div</span>></span> 283 </span> 284 <br> 285 <span class="line"> 286 <span class="tag">< 287 <span class="name">div</span> 288 <span class="attr">class</span>= 289 <span class="string">
289"img img3"</span>></span> 290 <span class="tag"></ 291 <span class="name">div</span>></span> 292 </span> 293 <br> 294 <span class="line"> 295 <span class="tag">< 296 <span class="name">div</span> 297 <span class="attr">class</span>= 298 <span class="string">"img img4"</span>></span> 299 <span class="tag"></ 300 <span class="name">div</span>></span> 301 </span> 302 <br> 303 <span class="line"> 304 <span class="tag"></ 305 <span class="name">div</span>></span> 306 </span> 307 <br> 308 <span class="line"> 309 <span class="tag"></ 310 <span class="name">div</span>></span> 311 </span> 312 <br> 313 <span class="line"> 314 <span class="tag"></ 315 <span class="name">div</span>></span> 316 </span> 317 <br> 318 <span class="line"> 319 <span class="tag"></ 320 <span class="name">div</span>></span> 321 </span> 322 <br> 323 </pre></td></tr></table></figure><ul><li>æå¤å± <code>container</code> ï¼æ§å¶å¾å½¢çä½ç½®å卿´ä¸ªé¡µé¢ä¸çå¸å±;</li><li><code>stage</code> å±ï¼èå°å±ï¼ä»è¿éå¼å§è®¾ç½® 3D æ¯æ·±ææï¼æ·»å perspective è§è·;</li><li><code>control</code> å±ï¼å¨ç»çæ§å¶å±ï¼éè¿è¿ä¸å±å¯ä»¥æ·»å æè½¬å¨ç»æè å¨ç§»å¨ç«¯ç触æ¸å¨ç»ï¼éè¿æ´æ¹ <code>translateZ</code> 屿§ä¹å¯ä»¥æè¿æè¿è§è§;</li><li><code>imgWrap</code> å±ï¼å¾çå±ï¼è£ å ¥æä»¬è¦æ¼æ¥çå¾çï¼ä¸æä¼æåã</li></ul><h2 id="å¾çæ¼æ¥"><a href="#å¾çæ¼æ¥" class="headerlink" title="å¾çæ¼æ¥"></a>å¾çæ¼æ¥</h2><p>å¾çæ¼æ¥å ¶å®ææ¯ä¸ªææ¯æ´»ï¼éè¦è®¸å¤ç计ç®ã</p><p>以ä¸è¿° Demo ä¸çæ£æ¹ä½ä¸ºä¾åï¼class 为 <code>img</code> ç div åçé«å®½ä¸º 400px*400pxãé£ä¹è¦å©ç¨ 4 个 è¿æ ·ç div æ¼æ¥æä¸ä¸ªæ£æ¹ä½ï¼éè¦åå«å° 4 个 div ç» Y è½´æè½¬ [90°, 180°, 270°, 360°]ï¼å <code>translateY(200px)</code> ã</p><p>å¼å¾æ³¨æçæ¯ï¼ä¸å®æ¯å æè½¬è§åº¦ï¼ååç§»è·ç¦»ï¼è¿ä¸ªé¡ºåºå¾éè¦ã</p><p>çç俯è§å¾ï¼ä¹å°±æ¯è¿ä¸ªææï¼<br><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203231144-1239156468.png" alt=""></p><p>è¿æ¯æç®åçæ åµäºï¼é½æ¯ç´è§ã</p><p>妿æ¯ä¸å¼ å¾éè¦åå²æå «ä»½ï¼å设æ¯å¼ å¾åå²åºæ¥çé«å®½ä¸º 400 <em>400 ï¼ 8 å¼ å¾éè¦åçæä½æ¯ä¾æ¬¡ç» Y è½´æè½¬ [45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°] ï¼åç§»çè·ç¦»ä¸º <code>translateY(482.84px)</code> ï¼ä¹å°±æ¯ ï¼200 + 200 </em>â2ï¼ã</p><p>çç俯è§å¾ï¼</p><p><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203100269-606257548.png" alt=""></p><p>ææå¾ï¼</p><iframe height="265" scrolling="no" src="//codepen.io/Chokcoco/embed/WGbERo/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen style="width:100%">See the Pen <a href="http://codepen.io/Chokcoco/pen/WGbERo/" target="_blank" rel="external">3DView3</a> by Chokcoco ( <a href="http://codepen.io/Chokcoco" target="_blank" rel="external">@Chokcoco</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe><h2 id="å¾çåå²"><a href="#å¾çåå²" class="headerlink" title="å¾çåå²"></a>å¾çåå²</h2><p>ä¸é¢ç示ä¾é½æ¯ä½¿ç¨çå¸¦èæ¯è²ç div åï¼ç°å¨æä»¬éåä¸å¼ çæ£çå¾çï¼å°å ¶æ¼æ¥æä¸ä¸ªæ±ä½ã</p><p>ä¸é¢è¿å¼ å¾ï¼å¤§å°ä¸º <code>3480px * 2000px</code> :</p><p><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203817676-376329451.png" alt=""></p><p>æä»¬æå®åå²ä¸º 20 ä»½ï¼æ¼æä¸ä¸ªæ£ 20 边形ï¼å½ç¶ä¸ç¨ä¸åä¸ååå¾ä¸æ¥ï¼å©ç¨ <code>background-position</code> å°±å¯ä»¥å®æäºãèä¸åå²ç份æ°è¶å¤ï¼æç»ååºæ¥çææè¶åä¸ä¸ªåæ±ï¼ææä¹æ´å çå®ã</p><p>æ£ 20 边形ï¼é£ä¹æ¯åå¾çç宽度为 <code>174px</code>
323ï¼ä¾æ¬¡éè¦éå¢çè§åº¦ä¸º 18° ï¼å¹¶ä¸æä»¬éè¦è®¡ç®åºéè¦åç§»çè·ç¦»ä¸º <code>translateZ(543px)</code>ã</p><p>ççææï¼ <a href="http://sbco.cc/demo/3dview/html/3dView2.html">Demoå¯ä»¥æ³è¿é</a></p><p><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203304144-1233838773.gif" alt=""></p><p>å¯ä»¥çå°ï¼å¾ä¸è¿è§ä¸ºä¸ä¸ªåæ±å½¢ï¼ä¸è¿æä¸äºå°é®é¢ï¼</p><ul><li>éåçå¾çå¿ é¡»æ¯å·¦å³é¦å°¾ç¸è¿ççï¼ä¸ç¶åæ±ç»åå¤ä¼æææ¾çä¸åè°ï¼è¿å°±è¦æ±è¦ä½¿ç¨è¿ç§æ¹å¼å¶ä½ H5 页é¢çæ¶åï¼ç¾æ¯åºç设计å¾å¿ 须左å³ç¸è¿æ è¿åæã</li><li>å¦å¤ä¸ç¹å°±æ¯åå²ç忝ï¼å¾çåå²è¶å¤åï¼è¶è¿è§ä¸ºä¸ºä¸ä¸ªåæ±ï¼æææ´ä½³ã</li></ul><h3 id="æ§å¶-control-å±ï¼è¿å ¥å°åæ±ç»é¢å "><a href="#æ§å¶-control-å±ï¼è¿å ¥å°åæ±ç»é¢å " class="headerlink" title="æ§å¶ control å±ï¼è¿å ¥å°åæ±ç»é¢å "></a>æ§å¶ <code>control</code> å±ï¼è¿å ¥å°åæ±ç»é¢å </h3><p>åå°è¿ä¸æ¥ï¼åªå©ä¸æå䏿¥ï¼å°±æ¯æ¨è¿æä»¬çè§è§ï¼è¿å ¥å°åæ±å é¨ï¼äº§ç 3D è§å¾çæè§ã</p><p>æä»¬éè¿ class 为 <code>control</code> è¿ä¸ª div æ§å¶è¿ä¸ªææï¼ä¸è¿è¿éæ§å¶æä»¬è¿å ¥åæ±<br>å é¨ç屿§ä¸æ¯è°æ´ä¿®æ¹ <code>perspective</code> 屿§ï¼èæ¯è°æ´ <code>translateZ</code> 屿§ãéè¿æ§å¶ translateZ å¾å°çç»é¢æ´å çå®ï¼å¯ä»¥èªå·±å°è¯ä¸ä¸å嫿§å¶ <code>perspective</code> ä¸ <code>translateZ</code> å¾å°çææï¼ä¾¿ä¼ææ·±å»çæåã</p><p>æåçææï¼ <a href="http://sbco.cc/demo/3dview/html/index.html">Demoå¯ä»¥æ³è¿éï¼ç±äºæ¯ç§»å¨ç«¯ææï¼æå¼æ¨¡æå¨è§çæ´ä½³</a></p><p>æ´ä¸ªææå¾å¤ªå¤§ï¼åªæªåäºé¨åå¶ä½æ GIFï¼</p><p><img src="http://images2015.cnblogs.com/blog/608782/201609/608782-20160906203317332-1486414378.gif" alt="3d view"></p><p>è¿æä¸ä¸ªå°é®é¢ï¼é£å°±æ¯è¿å ¥å°åæ±å é¨ä¹åï¼æ´ä¸ªå¾çé½åäºè¿æ¥ï¼æä»¥æä»¬å¯è½éè¦å©ç¨PSå°åå¾è¿è¡ä¸æ¬¡å·¦å³ç¿»è½¬ï¼è¿æ ·è¿å ¥å é¨ä¹åï¼çå°çå°±æ¯å徿æã</p><p>è³æ¤ï¼æ´ä¸ªé¡µé¢å°±ç®å®å·¥äºï¼æ¥ä¸æ¥çå°±æ¯æ·»å ä¸äº touch äºä»¶ï¼å¢æ·»ä¸äºç»èã</p><p>æ´ä¸ªææçç®åä»ç»å°±å°æ¤ç»æäºï¼æç妿µ ï¼æä¸é¾å æä¸å¯¹ä»¥åçæ¼ä¹å¤ï¼è¥æä»ä¹å»ºè®®æè æè§ï¼å¸æå¨è¯è®ºå¯ä»¥å¤§èçæåºææ£ã</p><p>æ¬æç¤ºä¾ Demo å·²ä¸ä¼ 卿ç Github ä¸ï¼</p><p><a href="https://github.com/chokcoco/Css33DView" target="_blank" rel="external">Css33DView</a></p> 324 </section> 325 326 327 328 329</article> 330 331 332<!-- å¤è¯´è¯è®ºæ¡ start --> 333 <div class="ds-thread" data-thread-key="post-3dview" data-title="ãCSSè¿é¶ãè¯è¯é ·ç«ç 3D è§è§" data-url="http://sbco.cc/2016/09/06/3dview/"></div> 334<!-- å¤è¯´è¯è®ºæ¡ end --> 335 336 337 <footer class="footer"> 338 <div class="friendLink">åæ é¾æ¥ï¼ 339 <ul> 340 <li><a href="http://www.cnblogs.com/coco1s/">Coco</a></li> 341 <li><a href="http://www.chengfeilong.com/">Scott's Blog</a></li> 342 <li><a href="http://www.52cik.com/">楼æä¸»</a></li> 343 <li><a href="http://blog.aisuso.com/">å§åé«å客</a></li> 344 </ul> 345 </div> 346 <div class="copy_right"> © chokcoco </div> 347 <span class="footer__copyright"> 2014-2016. | ç±<a href="https://hexo.io/"> Hexo </a>强åé©±å¨ | 主é¢<a href="https://github.com/someus/huno"> Huno </a></span> 348 349</footer> 350<!-- å¤è¯´å ¬å ±JS代ç start -->
351<script type="text/javascript"> 352var duoshuoQuery = {short_name:"sbco"}; 353 (function() { 354 var ds = document.createElement('script'); 355 ds.type = 'text/javascript';ds.async = true; 356 ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; 357 ds.charset = 'UTF-8'; 358 (document.getElementsByTagName('head')[0] 359 || document.getElementsByTagName('body')[0]).appendChild(ds); 360 })(); 361</script>
361 362<!-- å¤è¯´å ¬å ±JS代ç end --> 363<!-- cnzzç»è®¡ -->
364<script type="text/javascript"> 365 var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); 366 document.write(unescape("%3Cspan id='cnzz_stat_icon_1259441963'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259441963' type='text/javascript'%3E%3C/script%3E")); 367</script>
367 368<!-- æç« é 读æ°ç»è®¡ -->
369<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
369 370<!-- ç¾åº¦ç¬è«æ¨é -->
371<script> 372(function(){ 373 var bp = document.createElement('script'); 374 var curProtocol = window.location.protocol.split(':')[0]; 375 if (curProtocol === 'https') { 376 bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; 377 } 378 else { 379 bp.src = 'http://push.zhanzhang.baidu.com/push.js'; 380 } 381 var s = document.getElementsByTagName("script")[0]; 382 s.parentNode.insertBefore(bp, s); 383})(); 384</script>
384 385 386 </div> 387 </div> 388 <!-- js files --> 389
389<script src="/js/jquery.min.js"></script>
389 390
390<script src="/js/main.js"></script>
390 391
391<script src="/js/scale.fix.js"></script>
391 392 393 394 395
395<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
395 396
396<script type="text/javascript"> 397 $(document).ready(function(){ 398 MathJax.Hub.Config({ 399 tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]} 400 }); 401 }); 402 </script>
402 403 404 405 406 407
407<script src="/js/awesome-toc.min.js"></script>
407 408
408<script> 409 $(document).ready(function(){ 410 $.awesome_toc({ 411 overlay: true, 412 contentId: "post-content", 413 }); 414 }); 415 </script>
415 416 417 418 419 420 <!--kill ie6 --> 421<!--[if IE 6]> 422
422<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
422 423<![endif]--> 424</body> 425</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.