css如何实现图片的旋转展示效果（代码示例）
本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示，制作一个手动操作的“无限”照片轮播图。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
下面我们就开始介绍如何实现效果。
1、构建图像轮播框架
首先是HTML。它有点难以阅读，因为我们删除了元素之间的任何空格或回车。这样我们就可以使用JavaScript更轻松地引用不同的图像 - 空格或行在某些浏览器中创建新节点。
<div id="stage">
<div id="rotator"><a href="snow1.jpg"><img src="snow1.jpg" width="140"></a><a href="snow2.jpg"><img src="snow2.jpg" width="140"></a><a href="snow3.jpg"><img src="snow3.jpg" width="140"></a><a href="snow4.jpg"><img src="snow4.jpg" width="140"></a><a href="snow5.jpg"><img src="snow5.jpg" width="140"></a><a href="snow6.jpg"><img src="snow6.jpg" width="140"></a><a href="snow7.jpg"><img src="snow7.jpg" width="140"></a><a href="snow8.jpg"><img src="snow8.jpg" width="140"></a></div>
</div>
<p id="controls"><a href="#" onclick="rollLeft(document.getElementById('rotator')); return false;">←</a>
<a href="#" onclick="rollRight(document.getElementById('rotator')); return false;">→</a></p>正如你所看到的，那里没有太多需要解释的地方。画廊包含在DIV中，包括列出的照片/链接，然后是一些带有onclick事件的导航链接。
2、在3D空间中布置照片
造型更加复杂。我们在这里做的是将前五张照片塑造成凹形并隐藏任何额外的照片（暂时）。外部照片旋转60度，相邻照片旋转30度。中央照片被抬离页面。
#stage {
margin: 1em auto;
height: 120px;
}
#rotator {
position: absolute;
white-space: nowrap;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
}
#rotator a img {
position: relative;
padding: 10px;
border: 1px solid #ccc;
vertical-align: middle;
}
#rotator a:nth-child(1) img {
-webkit-transform-origin: 100% 50% 0;
-webkit-transform: rotateY(-60deg);
-moz-transform-origin: 100% 50% 0;
-moz-transform: rotateY(-60deg);
}
#rotator a:nth-child(2) img {
-webkit-transform-origin: 0 50% 0;
-webkit-transform: rotateY(-30deg);
-moz-transform-origin: 0 50% 0;
-moz-transform: rotateY(-30deg);
}
#rotator a:nth-child(3) img {
-webkit-transform: translateZ(220px);
-moz-transform: translateZ(220px);
}
#rotator a:nth-child(4) img {
-webkit-transform-origin: 100% 50% 0;
-webkit-transform: rotateY(30deg);
-moz-transform-origin: 100% 50% 0;
-moz-transform: rotateY(30deg);
}
#rotator a:nth-child(5) img {
-webkit-transform-origin: 0 50% 0;
-webkit-transform: rotateY(60deg);
-moz-transform-origin: 0 50% 0;
-moz-transform: rotateY(60deg);
}
#rotator a:nth-child(n+6) {
display: none;
}为了引用单个照片/链接，我们使用了nth-child伪类（如果不清楚，在之前的文章【css伪类之nth-child()示例详解】里有介绍）。在这种情况下，链接（A）是父DIV的子代。如果没有链接，则孩子们将成为IMG元素。
3、旋转照片
您之前看到的一点JavaScript（onclick）调用以下函数。他们所做的就是从DOM中的照片数组的一端获取一个元素并将其移动到另一端：
<script type="text/javascript">
function rollRight(el)
{
el.insertBefore(el.lastChild, el.firstChild);
}
function rollLeft(el)
{
el.appendChild(el.firstChild);
}
</script>JavaScript代码应该（几乎总是）放在页面的底部。
第一个函数将包含包含最后一个照片/链接（可见或隐藏）的节点，并将其放在第一个照片/链接之前。第二个函数获取第一个照片/链接并将其移动到行的末尾。使用onclick不是最优雅的方法，但现在它就足够了。
随着节点的移动，它们会采用分配给新位置（1,2,3,4,5或6+）的样式，因此我们需要做的就是改变它们的位置而不用担心移动或旋转。
4、效果展示
在这里，您可以看到旋转照片轮播的示例：
大功告成，大家可以自己动手试试效果！
绛旓細1 鍥剧墖鐨勬棆杞疄鐜鏂瑰紡鏈夊緢澶氾紝姣斿js瀹炵幇锛岀幇鍦ㄦ瘮杈冪畝鍗曠殑鏂规硶鏄娇鐢css3閲岄潰鐨勶紱transform灞炴ф潵瀹炵幇锛屽緢鏂逛究鐨勩傚叾瀹炶繖涓鐩緢绠鍗曪紝鍦ㄧ櫨搴﹂噷闈㈡悳绱竴涓媍ss3鏃嬭浆灏辩湅鍒颁簡 锛岄噷闈㈢殑鎵嬪唽浠嬬粛鐨勫緢娓呮锛屼笅闈㈡槸浠ｇ爜浠ュ強鏄剧ず鏁堟灉閮藉憟鐜板嚭鏉 锛2 涓嬮潰鏄啓鐨勪竴涓疄渚嬩唬鐮 锛屼唬鐮佸彲浠ョ洿鎺ヨ繍琛 銆備唬鐮佺殑瑙ｉ噴...
绛旓細杩欎綅缃戝弸浣犲ソ锛屽彧瑕佸湪浣犻渶瑕鏃嬭浆鐨勫厓绱犱笂鍐欎笂涓嬮潰鐨勪唬鐮佸氨鍙互浜嗭紝杩欐槸css3鐨勬柊灞炴э紝鏈濂戒娇鐢╟hrome娴忚鍣ㄦ煡鐪嬨俰mg:hover{ transform:rotate(30deg);//鏃嬭浆鐨勮搴︼紝鍙互鏄礋鏁 } 鍐嶇湅鐪嬪埆浜烘庝箞璇寸殑銆
绛旓細1. 浠嬬粛CSS3瀹炵幇鍥剧墖lowpoly鍔ㄧ敾鏁堟灉鐨勫疄渚嬶紝涓昏鍒╃敤浜咰SS3鐨則ransform灞炴х殑rotate鏃嬭浆锛宼ranslate绉诲姩锛宻cale缂╂斁銆2. 瑙ｉ噴浜唍th-of-type閫夋嫨鍣ㄧ殑浣跨敤锛屽畠鍙互璧嬩簣涓嶅悓鐨勫杈瑰舰纰庣墖涓嶅悓鐨勫姩鐢诲睘鎬у笺3. 璇︾粏璇存槑浜嗗浣曞埗浣滀綆澶氳竟褰㈤鏍肩殑鍥剧墖锛屽寘鎷娇鐢↖mage Triangulator宸ュ叿鍜孉I杞欢杩涜澶勭悊銆4. 鎻愪緵浜...
绛旓細褰撲娇鐢CSS瀹炵幇榧犳爣鎮诞鏃鍥剧墖鏃嬭浆鐨鏁堟灉鏃讹紝鍙兘浼氬嚭鐜扮涓娆¤繃娓℃椂鎺夊抚鐨勬儏鍐点傝繖閫氬父鏄敱浜庢祻瑙堝櫒鍦ㄧ涓娆″姞杞藉苟娓叉煋鍔ㄧ敾鏃堕渶瑕佽繘琛屼竴浜涢澶栫殑鎿嶄綔锛屽鑷存ц兘绋嶆湁涓嬮檷銆傛湁鍑犵鍙兘鐨勫師鍥犲鑷寸涓娆¤繃娓℃帀甯э細鍥剧墖缂撳瓨锛氶娆″姞杞藉浘鐗囨椂锛屾祻瑙堝櫒鍙兘闇瑕佷粠鏈嶅姟鍣ㄤ笅杞藉浘鐗囷紝骞跺皢鍏剁紦瀛樿捣鏉ャ傝繖鍙兘浼氬鑷翠竴瀹...
绛旓細鏈瘒鏂囩珷缁欏ぇ瀹跺甫鏉ョ殑鍐呭鏄浣曞疄鐜拌嚜鍔ㄦ棤闄愭挱鏀剧殑杞挱鍥惧姩鐢绘晥鏋滐紝鏈変竴瀹氱殑鍙傝冧环鍊硷紝鏈夐渶瑕佺殑鏈嬪弸鍙互鍙傝冧竴涓嬶紝甯屾湜瀵逛綘浠湁鎵甯姪銆傚湪涔嬪墠鐨勬枃绔犮css濡備綍瀹炵幇鍥剧墖鐨勬棆杞睍绀烘晥鏋溿戜腑浠嬬粛浜嗘墜鍔ㄦ棤闄愯疆鎾浘鐨勫埗浣滐紝鏈瘒鎴戜滑鏉ョ湅鐪嬭嚜鍔ㄦ棤闄愯疆鎾浘鍔ㄧ敾鐨勫埗浣溿備笅闈㈡垜浠氨鏉ョ湅鐪嬪姩鐢绘晥鏋滄槸濡備綍瀹炵幇鐨勩1銆...
绛旓細浣跨敤css Sprites background-position:-2px -2px锛涜繘琛屽畾浣鍥剧墖閲屽痉浣嶇疆 鍥剧墖绮剧伒閮ㄥ垎浠ｇ爜濡備笅 浣犺瘯璇 .S_login_top,.S_login_bottom { margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;background-image:url(../Sprites/Sprites.png);} .S_login_top{width:420px;height:23px;back...
绛旓細杩欎釜鏄埄鐢▄ transform:rotate(); } 璁剧疆鏃嬭浆锛屾棆杞灏戝害鍐冲畾鍦堟暟锛屾椂闂村拰骞崇紦搴︼紙鍙樺寲妯″紡锛夊湪鍔ㄧ敾閲岃缃紝鍙﹀浣犺璁剧疆涓涓嬩綘鐨勬棆杞涓績锛屾妸鏃嬭浆涓績璁剧疆鍒颁綘瑙勫畾鐨勫渾鐨勫渾蹇冿紙transform-origin锛夈傝繖鏍峰氨鍙互璁╁畠浠洿缁曡繖涓腑蹇冪偣鏃嬭浆浜嗐
绛旓細杩欎釜鍙互閫氳繃绾牱寮瀹炵幇 棣栧厛鏄簨浠讹細hover 鏁堟灉锛鏃嬭浆锛坱ransform:rotate(90deg);锛塒S锛90deg=90掳 閭ｆ垜灏变妇涓畝鍗曠殑渚嬪瓙 .pic:hover{ transform:rotate(90deg);-ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg...
绛旓細1銆侀鍏堟墦寮html鏂囦欢缂栬緫鍣紝杩欓噷浣跨敤vscode鏂板缓涓涓猦tml鏂囨。锛屾枃妗ｄ腑鍐欏叆鍩烘湰鐨刪tml缁撴瀯锛岀劧鍚庢彃鍏mg鏍囩骞舵彃鍏ヤ竴寮犲浘鐗囷紝缁檌mg涓涓猚lass灞炴э細2銆佺劧鍚庡湪涓婃柟鐨刪ead鏍囩涓殑style鏍囩璁剧疆鏍峰紡锛岃繖閲岃缃鍥剧墖鐨瀹藉害鍜岄珮搴﹀苟璁剧疆鐩稿瀹氫綅锛岀劧鍚庤缃浘鐗囩殑榧犳爣鎮诞鏍峰紡锛屽叾涓缃姩鐢荤殑褰㈠紡涓3d浠ュ強璁剧疆鍥剧墖3d鏃嬭浆...
绛旓細css3:鏃嬭浆30搴︼細transform: rotate(30deg);
