css怎么實現圖片的旋轉

這篇文章主要介紹了css怎么實現圖片的旋轉，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　1、構建圖像輪播框架

　　首先是HTML。它有點難以閱讀，因為我們刪除了元素之間的任何空格或回車。這樣我們就可以使用JavaScript更輕松地引用不同的圖像-空格或行在某些瀏覽器中創建新節點。

　　<divid="stage">

　　<divid="rotator"><ahref="snow1.jpg"><imgsrc="snow1.jpg"width="140"></a><ahref="snow2.jpg"><imgsrc="snow2.jpg"width="140"></a><ahref="snow3.jpg"><imgsrc="snow3.jpg"width="140"></a><ahref="snow4.jpg"><imgsrc="snow4.jpg"width="140"></a><ahref="snow5.jpg"><imgsrc="snow5.jpg"width="140"></a><ahref="snow6.jpg"><imgsrc="snow6.jpg"width="140"></a><ahref="snow7.jpg"><imgsrc="snow7.jpg"width="140"></a><ahref="snow8.jpg"><imgsrc="snow8.jpg"width="140"></a></div>

　　</div>

　　<pid="controls"><ahref="#"onclick="rollLeft(document.getElementById('rotator'));returnfalse;">&larr;</a>

　　<ahref="#"onclick="rollRight(document.getElementById('rotator'));returnfalse;">&rarr;</a></p>

　　正如你所看到的，那里沒有太多需要解釋的地方。畫廊包含在DIV中，包括列出的照片/鏈接，然后是一些帶有onclick事件的導航鏈接。

　　2、在3D空間中布置照片

　　造型更加復雜。我們在這里做的是將前五張照片塑造成凹形并隱藏任何額外的照片（暫時）。外部照片旋轉60度，相鄰照片旋轉30度。中央照片被抬離頁面。

　　#stage{

　　margin:1emauto;

　　height:120px;

　　}

　　#rotator{

　　position:absolute;

　　white-space:nowrap;

　　-webkit-perspective:1200px;

　　-moz-perspective:1200px;

　　}

　　#rotatoraimg{

　　position:relative;

　　padding:10px;

　　border:1pxsolid#ccc;

　　vertical-align:middle;

　　}

　　#rotatora:nth-child(1)img{

　　-webkit-transform-origin:100%50%0;

　　-webkit-transform:rotateY(-60deg);

　　-moz-transform-origin:100%50%0;

　　-moz-transform:rotateY(-60deg);

　　}

　　#rotatora:nth-child(2)img{

　　-webkit-transform-origin:050%0;

　　-webkit-transform:rotateY(-30deg);

　　-moz-transform-origin:050%0;

　　-moz-transform:rotateY(-30deg);

　　}

　　#rotatora:nth-child(3)img{

　　-webkit-transform:translateZ(220px);

　　-moz-transform:translateZ(220px);

　　}

　　#rotatora:nth-child(4)img{

　　-webkit-transform-origin:100%50%0;

　　-webkit-transform:rotateY(30deg);

　　-moz-transform-origin:100%50%0;

　　-moz-transform:rotateY(30deg);

　　}

　　#rotatora:nth-child(5)img{

　　-webkit-transform-origin:050%0;

　　-webkit-transform:rotateY(60deg);

　　-moz-transform-origin:050%0;

　　-moz-transform:rotateY(60deg);

　　}

　　#rotatora:nth-child(n+6){

　　display:none;

　　}

　　為了引用單個照片/鏈接，我們使用了nth-child偽類（如果不清楚，在之前的文章【css偽類之nth-child()示例詳解】里有介紹）。在這種情況下，鏈接（A）是父DIV的子代。如果沒有鏈接，則孩子們將成為IMG元素。

　　3、旋轉照片

　　您之前看到的一點JavaScript（onclick）調用以下函數。他們所做的就是從DOM中的照片數組的一端獲取一個元素并將其移動到另一端：

　　<scripttype="text/javascript">

　　functionrollRight(el)

　　{

　　el.insertBefore(el.lastChild,el.firstChild);

　　}

　　functionrollLeft(el)

　　{

　　el.appendChild(el.firstChild);

　　}

　　</script>

　　JavaScript代碼應該（幾乎總是）放在頁面的底部。

　　第一個函數將包含包含最后一個照片/鏈接（可見或隱藏）的節點，并將其放在第一個照片/鏈接之前。第二個函數獲取第一個照片/鏈接并將其移動到行的末尾。使用onclick不是最優雅的方法，但現在它就足夠了。

　　隨著節點的移動，它們會采用分配給新位置（1,2,3,4,5或6+）的樣式，因此我們需要做的就是改變它們的位置而不用擔心移動或旋轉。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css怎么實現圖片的旋轉”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!