rotatex();沿x軸翻轉
rotatey();沿y軸翻轉
rotatez();沿z軸翻轉(類似於rotate()在水平旋轉)
transform: translate3d(30px,30px,800px)
transform:translatez(800px) translatex(30px) translatey(30px);
transform:translatez(800px) translate(30px,30px);
perspective:value;
用於看3d效果
transform-style:preserve-3d;
用於子元素保持3d效果
transform-origin:left/right top/bottom
用於確定翻轉位置,預設為center
1.建立動畫的運動規則，並且取名
@keyframes name
to{}
to{}
}2.繫結動畫在某個元素上
動畫屬性
animation:(簡寫)name 5s linear 2s infinite alternate;
animation-name: 動畫名
animation-duration: 時間 預設0
animation-timing-function:曲線 預設ease
linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease： 平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )： 特定的貝塞爾曲線型別，4個數值需在[0, 1]區間內
animation-delay :延時 預設0
infinite： 無限迴圈
： 指定物件動畫的具體迴圈次數
animation-direction:週期後是否倒放
running： 運動
paused： 暫停
animation-play-state:是否暫停 預設 running
running： 運動
paused： 暫停
animation-fill-mode:動畫結束後的狀態
none： 預設值。不設定物件動畫之外的狀態
forwards： 設定物件狀態為動畫結束時的狀態
backwards： 設定物件狀態為動畫開始時的狀態
both： 設定物件狀態為動畫結束或開始的狀態
charset="utf-8">
正方體title>
head>
type="text/css">
* li
.wrap
.wrap
ul .wrap
ulli
.wrap
ul.down
.wrap
ul.up
.wrap
ul.left
.wrap
ul.right
.wrap
ul.top
.wrap
ul.top
.wrap
:hover
style>
class="wrap">
class="left">
li>
class="right">
li>
class="top">
li>
class="bottom">
li>
class="up">
li>
class="down">
li>
ul>
div>
body>
html>
charset="utf-8">
3d導航title>
type="text/css">
* li
ulul
li ullia
ulli:last-child
a ullia
p ullia
.a1 ullia
.a2 ullia
:hover
style>
head>
href="">
class="a1">首頁p>
class="a2">首頁p>
a>
li>
href="">
class="a1">首頁p>
class="a2">首頁p>
a>
li>
href="">
class="a1">首頁p>
class="a2">首頁p>
a>
li>
href="">
class="a1">首頁p>
class="a2">首頁p>
a>
li>
href="">
class="a1">首頁p>
class="a2">首頁p>
a>
li>
ul>
body>
html>
css3 3D轉換以及動畫效果
不要給我說什麼底層原理 框架核心！老夫敲 就是一把梭！複製！貼上！拿起鍵盤就是幹！哈哈o o 通過乙個小小的demo學會css3新特性，實在不行那就複製貼上把。首先在了解3d效果之前必須先知道2d的的屬性，因為3d效果是在二維變換的基礎上增加了z軸從而達到3d效果。transform 有4個常用的方...
CSS3 3D轉換效果
css3 中是通過transform style樣式屬性來實現 3d 立體效果的，為父元素設定了該屬性其子元素就會具有 3d 效果，對應的屬性值如下 舉個例子 實現乙個正方體效果 主要是通過父元素的四條邊和前後面來構成正方體的六個面，再結合transform style 平移和旋轉等方法就可以實現。...
CSS3 3D翻轉動畫
css3動畫屬性 transform 變換 大小 位置 顏色 變形等狀態的變化 transition 過渡 初始狀態過渡到結束狀態這個過程中產生的動畫 animation 動畫 定義關鍵幀動畫 css3可以實現多種動畫效果，下面說的是css3實現乙個3d翻轉的動畫效果。上 html containe...