首先，我們在網頁裡面放置 3 個圖示。
相應的 html **為：
class="mega-octicon octicon-mortar-board anim-flip">
span>
class="mega-octicon octicon-eye anim-flip">
span>
class="mega-octicon octicon-globe anim-flip">
span>
css3水平翻轉
.anim-flip
:hover
@keyframes featuresicon
100%
}@-webkit-keyframes featuresicon
100%
}
@keyframes規則。
@keyframes規則用於建立動畫。在@keyframes中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
animation: 0.35s
linear 0s
alternate
none 1 featuresicon;
featuresicon規則。由於不同瀏覽器對 css3 的支援不同，因此我們在下面的**中，定義了 2 個@keyframes規則。
transform用來進行 2d 和 3d 轉換。通過scale()方法，元素的尺寸會增加或減少，根據給定的寬度（x 軸）和高度（y 軸）引數。
因此，我們使用：
50%
100%
CSS 變形動畫 水平，垂直翻轉元素
css3的2d變形屬性，scale 用來縮放元素 放大和縮小 translate 在螢幕上移動元素 上下左右 rotate 按照一定角度旋轉元素 單位為度 skew 沿x和y軸對元素進行斜切，matrix 允許以畫素精度來控制變形效果。變形是在文件外發生的。乙個變形的元素不會影響它附近未變形元素的位...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...