3D 版的讀者牆到現在應該不多見，最大的原因應該是相容性的問題，我們應該放棄對太老的、過時的瀏覽器相容性的工作，這種做法也是鼓勵使用者安裝最新版本的瀏覽器，更好的體驗 HTML5/CSS3 的優秀的特性。

Twitter 徹底的放棄了 IE6 和 IE7，bootstrap 對 IE7, IE8 支援都不是很好。而 Google Apps 在未來幾周內將放棄對微軟 IE9 的支援，這是 Google 一貫執行的產品支援政策，如果你還在修復 IE6，只能表示無語。 Salong 主題沒有做任何瀏覽器相容性的問題，絕大多數最新的瀏覽器都沒有問題，IE9 也能正常瀏覽，但 CSS3 的動畫效果等屬性是沒有，勇敢地放棄 IE9 以下的瀏覽器，這是筆者在製作主題中最爽的一件事。

隨著瀏覽器的更新與效能的提升，不只 CSS3 的 3D 效果，相信更多的 HTML5/CSS3 的最新技術會融入到越來越多的網頁中。

3D 讀者牆，最大的特點是使用了 CSS3 的 3D 動畫效果，主要是 CSS3 的透視檢視與 3D 轉換，下面簡單的介紹下：

1 、複製主題下的 page.php 檔案，重新命名為：template-reader.php，將其中第一個<?php 替換為：

2 、在模板檔案中查詢：

在其下面新增 3D 讀者牆 PHP 程式碼：

  1. <!-- 讀者牆 -->
  2. <?php
  3.   $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != 'longyizaifei@163.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 36";
  4.   $wall = $wpdb->get_results($query);
  5.   $maxNum = $wall[0]->cnt;
  6.    foreach ($wall as $comment)
  7.   {
  8.     if( $comment->comment_author_url )
  9.     $url = $comment->comment_author_url;
  10.     else $url="#";
  11.     $r="rel='external nofollow'";
  12.     $imgsize="36";
  13.     $tmp = "<li><section ><div ><span ><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($comment->comment_author_email) )."&size=".$imgsize ."&d=identicon&r=G' /> ".$comment->comment_author." +".$comment->cnt."</span><div ><a target='_blank' href='".$url."'> 檢視 ".$comment->comment_author." 的站點</a></div></div></section></li>";
  14.     $output .= $tmp;
  15.   }
  16.   $output = "<ul >".$output."</ul>";
  17.   echo $output ;
  18.   ?>
  19. <!-- 讀者牆 end -->

如果不是用 HTML5 編寫的站點，請把上面的 section 標籤改成 div 。

3 、 3D 版的讀者牆與網上的其它版本最大的區別是 CSS 樣式，最新的 CSS3 特性在下面的 CSS 程式碼中都有註釋：

  2. .reader-box .avatar,.reader .site a{ width: 170px; height: 36px; padding: 8px; display: block; border: 1px #fff solid; -webkit-box-shadow: 0 0 2px #ddd; -moz-box-shadow: 0 0 2px #ddd; box-shadow: 0 0 2px #ddd; }
  3. .reader .site a{ background-color: #fff; }
  4. .reader-box img { width:36px; height:36px; float: left; margin-right: 12px; }
  5. .reader { perspective: 800px;
  6.     width:188px; margin: 8px; float:left; }
  7. .reader-box { position:relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
  8.     -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease;
  9.     text-align: center; line-height: 36px; }
  10. .reader .site { position:absolute; top:0; -webkit-transform: rotateY(182deg) translateZ(1px); -moz-transform: rotateY(182deg) translateZ(1px); -ms-transform: rotateY(182deg) translateZ(1px); -o-transform: rotateY(182deg) translateZ(1px); transform: rotateY(182deg) translateZ(1px);
  11.     color:#666; opacity:.0; -webkit-transition: 1s opacity; -moz-transition: 1s opacity; -ms-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; ; }
  12. .reader:hover .reader-box{ -webkit-transform: rotateY(182deg); -moz-transform: rotateY(182deg); -ms-transform: rotateY(182deg); -o-transform: rotateY(182deg); transform: rotateY(182deg); ; }
  13. .reader:hover .site{ opacity:1; }

3D 版讀者牆

經過測試大多數最新的瀏覽器：Firefox 、 Chrome 、 Safari 、 Opera 、 360 、獵豹等瀏覽器都是支援的，IE10 以上才支援，如果考慮 IE9 以下的瀏覽器相容性，

筆者

覺得前端技術很難進步，即使有進步也苦了前端工程師。