iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
Modern Web

勇者Jason和前端之鑰系列 第 27

【DAY27】到底是誰偷吃了薯條?(用CSS實現名片翻轉效果)

在開始前我想先分享一段小故事,
昨天的鐵人文有點混,
因為我忙著玩效果,卻忘了可以放到內文的東西少的可憐。
是為了今天的效果做準備,
不過這就是人生,誰說每天都要精彩,
偶爾的平淡也是不錯。嗯?藉口!
就是學得太慢了!


還記得【DAY25】我選擇死亡,Ai的初體驗...
我把文章貼給了我的好友Tim看,
他只回傳給我一篇文章,
10個阻擋你進步的繪圖迷思
我認真把他看完了,
我似乎一直在催眠自己「我不會...我不會...」
沒有人天生就會畫圖的的!我決定補交作業!


展示頁面
(手機請橫置)
完整程式碼

緣起

R是個喜歡吃薯條的設計師,在一次團購麥當勞的夜晚,出現了「薯條神偷」,只是一轉眼的時間,薯條不知不覺地減少了,囂張的「薯條神偷」還在薯條內加鹽!宣示自己有來過!氣pupu的R設計師因此找上我們...

任務目標

薯條神偷神出鬼沒,只會在特定條件時出現,快來找出薯條神偷。

還記得在【DAY24】transform,進入視覺系的CSS第一步,網頁要動起來了
說到的翻轉效果:rotateY嗎?
rotateY只是翻轉同一個元素,會從背面透視他,
因此,薯條神偷還是只會躲在後面不跟你見面,
今天我們要讓她現行!
首先由於DAY24的元素只有一個,
因此,他怎麼翻轉都是同一個元素,
我們這次要讓兩個元素在同一個位置上,當我們hover上去時就會自動翻轉

index.html

<div class="card-wrap" ontouchstart="this.classList.toggle('hover');">
	<div class="card">
     	<div class="front">
  	   		<img src="img/hide.svg" alt="">
     	</div>
    	<div class="back">
    	   	<img src="img/thief.svg" alt="">
     	</div>
   	</div>
</div>

我們需要用一個.card-wrap讓人觸發hover的效果,
為何要多一個.card-wrap而不直接放在.card上呢?
這是因為當我們在翻轉.card的時候,
使用者的滑鼠可能無法繼續hover在.card元素上,
因此,需要多一個固定不動的.card-wrap
(hoverA元素觸發B元素transform效果,請見昨天的鐵人文)

style.scss

body{
    background-color: #909090;
    .card-wrap{
        width: 382px;
        height: 342px;
        perspective: 1000;
        margin: 100px auto 0;
        &:hover .card{
            transform: rotateY(-180deg);
        }
        .card, .front, .back{
            width: 382px;
            height: 342px;
        }
        .card{
            transform-style: preserve-3d;
            transition: all ease-in-out 2s;
            position: relative;
        }
        .front, .back{
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
        .front{
            z-index: 2;
        }
        .back{
            transform: rotateY(180deg)
        }
    }
}

我們在.card-wrap下了一個perspective: 1000;的效果,
是因為要讓他透視,要了解後面的數值影響的結果可以來這裏
而關於perspective,這個介紹的比較詳細。

我自己的圖解:
https://ithelp.ithome.com.tw/upload/images/20180115/20107705ndGUr7v0c2.png
perspective: 1000;因為你坐的離電腦夠遠,所以可以很正常的看到元素翻轉。
perspective: 20;元素的寬都382px了,你可以想成192px(一半)轉到螢幕後面;另一半轉到螢幕前面。
但是妳的距離只有20,所以你只看得到軸(螢幕)到你的那20px,剩下172px都在你的腦後,看不見。

再不行,將臉靠近螢幕,拿手機在你和螢幕之間,
轉他,會發現很難看清楚手機的側面,
就是這種感覺。

其中.card-wrap記得要給widthheight,不然Y軸會跑掉。
(我參考的教學網站就是沒給,還是自己去嘗試才完成翻轉效果。)

.card-wrap:hover .card{
    transform: rotateY(-180deg);
}

在游標移到.card-wrap:hover時,
.card會逆時針翻轉180度,

.card{
    transform-style: preserve-3d;
}

transform-style:有兩種數值flat(預設值)跟preserve-3d
flat代表子元素不保留3D空間;preserve-3d則保留,
用以告訴瀏覽器,是否要以3D去看子元素,
如果拿掉,元素就只是個一面的元素。

.front, .back{
    backface-visibility: hidden;
}

讓元素成為白鬍子
一名偉大的海賊從不以背面示人,遇到事情從頭都是正面迎敵,
因此,即時正面千瘡百孔,背面依然完整無瑕。
使用backface-visibility: hidden;
讓元素只要轉到背面就隱藏起來了。

.front{
    z-index: 2;
}

前面的元素要在上面才能蓋過後面的元素。

.back{
    transform: rotateY(180deg)
}

薯條神偷神出鬼沒,
我們將神偷先翻180度過去,
經過翻轉才會正常。


<div ontouchstart="this.classList.toggle('hover');>

關於這個我還沒研究,似乎是JS,讓點擊螢幕可以代替翻轉效果。

後記

找到薯條神偷了!但是薯條神偷神通廣大,伴隨著嘎嘎嘎嘎嘎嘎嘎的笑聲,瞬間消失的無影無蹤,
看來,想要「與神同行」還有一段差距!


上一篇
【DAY26】用transform跟transition讓網頁動起來!
下一篇
【DAY28】transform的matrix屬性
系列文
勇者Jason和前端之鑰32

1 則留言

0
GG
iT邦新手 5 級 ‧ 2018-01-15 22:03:14

我的天哪Jason!!!!你已經變得比我還要會用AI了!!!!/images/emoticon/emoticon32.gif

阿陰 iT邦新手 5 級 ‧ 2018-01-16 19:22:21 檢舉

有澆水有差 /images/emoticon/emoticon12.gif

我要留言

立即登入留言