給每個li乙個左浮動；
在給「card」這個類設定乙個position：relative（相對定位）；
給「card-on 」這個類設定乙個動畫過渡效果transition: all 0.8s ease。以及position：absolute（絕對定位）；
翻轉時背面的元素就要隱藏起來我們就給他來乙個屬性backface-visibility:hidden;他的預設值是visible（可見的）。最後在設定乙個陰影的效果 ，增加立體感。
.card-on（1） transition-property：指定過渡或動態模擬的 css 屬性；
（2） transition-duration：指定過渡完成所需的時間；
（3） transition-timing-function：指定過渡函式；
（4） transition-delay：指定開始出現的延遲時間；
給「card-in」這個類新增乙個transform 屬性，屬性值為rotatey(180deg)意思是在y軸上順時針旋轉180°；
給「card」新增乙個偽類滑鼠放上去「card-on2」逆時針旋轉180°；
最後再給「card」新增乙個偽類滑鼠放上去「card-in」旋轉0°；見實現**。
.card-in
.card:hover .card-on2
.card:hover .card-in
CSS動畫效果
2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...
CSS動畫效果
css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...
常用的CSS動畫效果
在實際運用中，經常需要用到旋轉 放大等動畫效果。以下列舉了一些常見的動畫效果的css實現。所有的動畫都需要設定過渡transition rotateimg,scaleimg,rotateandscale,translateimg然後根據不同的動畫需要，修改css樣式 1 旋轉 rotateimg h...