沒有js，css也能玩出酷炫的效果

一般我們想要達到一些動畫效果的時候都會第一時間想到js根據各種條件觸發各種操作，來達到我們想要看到的動畫效果，前面分享的飛機大戰就是滿屏的js代碼，各種條件的判斷，什麼階段執行什麼函數，什麼情況出現什麼效果，麻煩一點的效果都是很多js實作的。

飛機大戰

但是今天，我們發現css也能實作一些簡單的動畫，而這些簡單的動畫用好了，也能有非常大的視覺沖擊。

思路

3D相冊，突出在3D的效果上，要有一種立體感。

我們利用6張圖檔，通過transform的rotateY和rotateX來旋轉方向 translateZ來拉伸空間距離感。模拟篩子的六面。

先給一個大盒子用來當架構，再用一個盒子裝所有的圖檔，先傳6張圖檔。

<div class="wrap">
            <div class="cube">
                <span class="In_Front">
                    <img src="img/7.jpg" class="in_pic"/>
                </span>
                <span class="In_Back">
                    <img src="img/8.jpg" class="in_pic"/>
                </span>
                <span class="In_Top">
                    <img src="img/9.jpg" class="in_pic"/>
                </span>
                <span class="In_Bottom">
                    <img src="img/10.jpg" class="in_pic"/>
                </span>
                <span  class="In_Left">
                    <img src="img/11.jpg"  class="in_pic"/>
                </span>
                <span class="In_Right">
                    <img src="img/12.jpg" class="in_pic"/>
                </span>
            </div>
        </div>

再用css依次通過旋轉來讓圖檔到達各自的位置

盒子的樣式就不寫了寫圖檔旋轉的角度

.cube span{ //因為用的是span标簽當圖檔的存放器 是以需要先轉款、換成塊元素 再給寬高 定位
                display: block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
.cube .in_pic{//圖檔統一設定成大小一緻，避免圖檔尺寸不同導緻不能達到完美的立方體。
                width: 100px;
                height: 100px;
                opacity: 0.5;//設定透明度是因為再圖檔靜止時正面的圖檔會遮住背面的圖 ，讓人誤以為隻有一張圖 ，就好比一塊魔方隻有一面對着你你看不到其他的顔色
            }
 .cube .In_Left{//先沿y軸讓圖檔反向旋轉90度面向左邊，再拉伸50px，到達立方體的左側
                transform: rotateY(-90deg) translateZ(50px);
            }
            .cube .In_Right{//先沿y軸讓圖檔正向旋轉90度面向右邊，再拉伸50px，到達立方體的右側
                transform: rotateY(90deg) translateZ(50PX);
            }
            .cube .In_Top{//先沿x軸正向旋轉90度讓片水準向上，再往前拉伸50px到達底部位置
                transform: rotateX(90deg) translateZ(50px);
            }
            .cube .In_Bottom{//先沿x軸旋轉90度讓片水準向下，再往前拉伸50px到達底部位置
                transform: rotateX(-90deg) translateZ(50px);
            }
            .cube .In_Front{//以我們正前方的視角所見到的一面為前方 拉近我們的距離50px，剛好半張圖檔的寬度
                transform: rotateY(0deg) translateZ(50px);
            }
            .cube .In_Back{//同理這就是背面的一張 是以要拉遠50px的距離，同時這就隻是後退了50px，達到背面效果，它還需要轉身，是以再原地旋轉180度轉身。
                transform: translateZ(-50PX)rotateY(180deg) ;
            }
            //此時我們看到的隻有正前方的一張照片 ，因為旋轉都是正面對着我們的視角旋轉的，想要看到側邊上邊這些其他角度的圖檔，需要把整個立方體旋轉一些角度才行。
            .cube{
                width: 200px;
                height: 200px;
                /*保持3D效果*/
                margin: 0 auto;
                transform-style: preserve-3d;
                transform: rotateX(-40deg) rotateY(-80deg);//這裡就是旋轉的角度。
                animation: rotate linear 10s infinite;//10秒鐘完成動畫效果，并且無限循環
            }
            //再補一個動畫
            @-webkit-keyframes rotate{
                 0%{
            		transform: rotateX(0deg) rotateY(0deg);
			    }
			      35%{
			      	transform: rotateX(180deg) rotateY(180deg);
			    }
			      50%{
			      	transform: rotateX(360deg) rotateY(360deg);
			    }
			      60%{
			        transform: rotateX(720deg) rotateY(720deg);
			    }
            }

到這一步其實就已經實作了3d的相冊了，但是我們還可以寫的更炫酷一點，在這個小的3D相冊的外邊套一層大的3D相冊，隻需要再傳6張照片，照片的尺寸為内層照片的兩倍， translateZ(100px)拉伸的距離也為兩倍就實作了包裹小3D相冊。

.cube div{
                position: absolute;
                width: 200px;
                height: 200px;
                opacity: 0.9;
                transition: all 0.4s;
            }
            /*定義所有圖檔的樣式*/
            .pic{
                width: 200px;
                height: 200px;
            }
            .cube .Out_Left{
                transform: rotateY(-90deg) translateZ(100px);
            }
            .cube .Out_Right{
                transform: rotateY(90deg) translateZ(100px);
            }
            .cube .Out_Top{
                transform: rotateX(90deg) translateZ(100px);
            }
            .cube .Out_Bottom{
                transform: rotateX(-90deg) translateZ(100px);
            }
            .cube .Out_Front{
                transform: rotateY(0deg) translateZ(100px);
            }
            .cube .Out_Back{
                transform: translateZ(-100px) rotateY(180deg);
            }

雖然加了透明的效果但是還是很難看到裡面的小3D相冊，視覺上就隻看到外層的相冊，可以再加上一個滑鼠移入時外層相冊打開的效果，就是讓 translateZ(200px)，距離再拉大一倍，這樣就把裡層的相冊顯示出來了

.cube:hover .Out_Left{
                transform: rotateY(90deg) translateZ(-200px);
            }
            .cube:hover .Out_Right{
                transform: rotateY(-90deg) translateZ(-200PX);
            }
            .cube:hover .Out_Top{
                transform: rotateX(-90deg) translateZ(-200px);
            }
            .cube:hover .Out_Bottom{
                transform: rotateX(90deg) translateZ(-200px);
            }
            .cube:hover .Out_Front{
                transform: translateZ(200PX) ;
            }
            .cube:hover .Out_Back{
                transform: translateZ(-200PX) ;
            }

附上完整的代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
        	.wrap{
                width: 1000px;
                height:300px;
                margin: 200px auto;
                position: relative;
            }
            .cube span{
                display: block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
             .cube .in_pic{
                width: 100px;
                height: 100px;
                opacity: 0.5;
            }
            .cube .In_Left{
                transform: rotateY(-90deg) translateZ(50px);
            }
            .cube .In_Right{
                transform: rotateY(90deg) translateZ(50PX);
            }
            .cube .In_Top{
                transform: rotateX(90deg) translateZ(50px);
            }
            .cube .In_Bottom{
                transform: rotateX(-90deg) translateZ(50px);
            }
            .cube .In_Front{
                transform: rotateY(0deg) translateZ(50px);
            }
            .cube .In_Back{
                transform: translateZ(-50PX) rotateY(180deg);
            }
            .cube{
                width: 200px;
                height: 200px;
                /*保持3D效果*/
                margin: 0 auto;
                transform-style: preserve-3d;
                transform: rotateX(-40deg) rotateY(-80deg);
                animation: rotate linear 10s infinite;
            }
            @-webkit-keyframes rotate{
                 0%{
            		transform: rotateX(0deg) rotateY(0deg);
			    }
			      35%{
			      	transform: rotateX(180deg) rotateY(180deg);
			    }
			      50%{
			      	transform: rotateX(360deg) rotateY(360deg);
			    }
			      60%{
			        transform: rotateX(720deg) rotateY(720deg);
			    }
            }
            .cube div{
                position: absolute;
                width: 200px;
                height: 200px;
                opacity: 0.9;
                /*0.4秒*/
                transition: all 0.4s;
            }
            /*定義所有圖檔的樣式*/
            .pic{
                width: 200px;
                height: 200px;
            }
            .cube .Out_Left{
                transform: rotateY(-90deg) translateZ(100px);
            }
            .cube .Out_Right{
                transform: rotateY(90deg) translateZ(100px);
            }
            .cube .Out_Top{
                transform: rotateX(90deg) translateZ(100px);
            }
            .cube .Out_Bottom{
                transform: rotateX(-90deg) translateZ(100px);
            }
            .cube .Out_Front{
                transform: rotateY(0deg) translateZ(100px);
            }
            .cube .Out_Back{
                transform: translateZ(-100px) rotateY(180deg);
            }
            /*滑鼠移入效果*/
            .cube:hover .Out_Left{
                transform: rotateY(90deg) translateZ(-200px);
            }
            .cube:hover .Out_Right{
                transform: rotateY(-90deg) translateZ(-200PX);
            }
            .cube:hover .Out_Top{
                transform: rotateX(-90deg) translateZ(-200px);
            }
            .cube:hover .Out_Bottom{
                transform: rotateX(90deg) translateZ(-200px);
            }
            .cube:hover .Out_Front{
                transform: translateZ(200PX) ;
            }
            .cube:hover .Out_Back{
                transform: translateZ(-200PX) ;
            }
		</style>
	</head>
	<body>
		<div class="wrap">
            <div class="cube">
               <div class="Out_Front">
                    <img src="img/1.jpg" class="pic"/>
                </div>
                <div class="Out_Back">
                    <img src="img/2.jpg"  class="pic"/>
                </div>
                <div class="Out_Top">
                    <img src="img/3.jpg"  class="pic"/>
                </div>
                <div class="Out_Bottom">
                    <img src="img/4.jpg"  class="pic"/>
                </div>
                <div class="Out_Left">
                    <img src="img/5.jpg"  class="pic"/>
                </div>
                <div class="Out_Right">
                    <img src="img/6.jpg"  class="pic"/>
                </div>
                <span class="In_Front">
                    <img src="img/7.jpg" class="in_pic"/>
                </span>
                <span class="In_Back">
                    <img src="img/8.jpg" class="in_pic"/>
                </span>
                <span class="In_Top">
                    <img src="img/9.jpg" class="in_pic"/>
                </span>
                <span class="In_Bottom">
                    <img src="img/10.jpg" class="in_pic"/>
                </span>
                <span  class="In_Left">
                    <img src="img/11.jpg"  class="in_pic"/>
                </span>
                <span class="In_Right">
                    <img src="img/12.jpg" class="in_pic"/>
                </span>
            </div>
       </div>
	</body>
</html>

css實作3d相冊沒有js，css也能玩出酷炫的效果

利用css制作3D相冊

沒有js，css也能玩出酷炫的效果

思路

繼續閱讀

CSS的僞元素和僞類的差別

css僞類與僞元素差別

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”