3D轉(zhuǎn)換
三維變換使用基于二維變換的相同屬性猛蔽，可以讓我們基于三個坐標(biāo)方向?qū)υ剡M行變換。和二維變形一樣，三維變形可以使用transform屬性來設(shè)置
3D移動
translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫曼库，如：translateX(length),translateY(length), translateZ(length)
3D縮影
scale3d(number,number,number)使元素在這三個緯度中縮放区岗，也可分開寫，如：scaleX(),scaleY(),scaleZ()
3D旋轉(zhuǎn)
a) rotate3d(x,y,z,angle)：指定需要進行旋轉(zhuǎn)的坐標(biāo)軸
a) rotateX(angle) 是元素依照x軸旋轉(zhuǎn)毁枯；
b) rotateY(angle) 是元素依照y軸旋轉(zhuǎn)慈缔；
c) rotateZ(angle) 是元素依照z軸旋轉(zhuǎn)
3D透視/景深效果
左手法則：大拇指指向當(dāng)前坐標(biāo)軸的下方向，手指環(huán)繞的方向就是正方向
- perspective(length)
為一個元素設(shè)置三維透視的距離种玛。僅作用于元素的后代藐鹤，而不是其元素本身。當(dāng)perspective:none/0;
時蒂誉，相當(dāng)于沒有設(shè)perspective(length)教藻。比如你要建立一個小立方體距帅，長寬高都是200px右锨。如果你的
perspective < 200px ，那就相當(dāng)于站在盒子里面看的結(jié)果碌秸，如果perspective 非常大那就是站在非常遠(yuǎn)的地方看（立方體已經(jīng)成了小正方形了）绍移，意味著perspective 屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果 - perspective-origin 屬性規(guī)定了鏡頭在平面上的位置讥电，默認(rèn)是放在元素的中心
- transform-style 使被轉(zhuǎn)換的子元素保留其3D轉(zhuǎn)換(需要設(shè)置在父元素中）
flat 子元素將不保留其3D位置——平面方式
preserve-3d 子元素將保留其3D位置——立體方式
嘗試一下
body,html {
background: #222;
font-size: 22px;
color: rgb(18, 204, 250);
}
.page {
position: relative;
max-width: 640px;
width: 100%;
height: 100%;
margin: 0 auto;
background: #373737;
}
.cude{
position:absolute;
top:200px;
left:100px;
width: 100px;
-webkit-perspective: 1000px;
perspective: 1500px;
}
.dice {
position: absolute;
width: 300px;
height: 300px;
transform: rotateX(-15deg) rotateY(47deg);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: rotate 6s linear infinite alternate;
}
.dice .side {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: rgba(241, 160, 8,.4);
text-align: center;
line-height:300px;
color:#fff;
font-size:40px;
font-weight: bold;
border:1px solid orange;
animation: move 6s linear infinite alternate-reverse;
}
.front{
transform:translateZ(150px);
}
.top{
transform: rotateX(90deg) translateZ(150px);
}
.bottom{
transform: rotateX(-90deg) translateZ(150px);
}
.left{
transform: rotateY(-90deg) translateZ(150px);
}
.right{
transform: rotateY(90deg) translateZ(150px);
}
.back{
transform: rotateY(-180deg) translateZ(150px);
}
@keyframes move {
0% {}
100% {
width: 300px;
height: 300px;
}
}
@keyframes rotate {
0%{
transform: rotate3d(0,0,0,0deg);
}
100% {
transform: rotate3d(45,45,45,720deg);
}
}
關(guān)鍵幀動畫
動畫是CSS3中具有顛覆性的特征之一蹂窖，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果
- 必要元素
a. 通過@keyframes指定動畫序列恩敌； 自動補間動畫瞬测，確定兩個點，系統(tǒng)會自動計算中間過程纠炮，這兩個點就稱為關(guān)鍵幀月趟，可以設(shè)置多個關(guān)鍵幀
b. 通過百分比將動畫序列分割成多個節(jié)點
c. 在各個節(jié)點中分別定義各屬性
d. 通過animation將動畫應(yīng)用于相應(yīng)元素 - animation常用屬性
a. 動畫序列的名稱:animation-name: move;
b. 動畫的持續(xù)時間:animation-duration: 1s;
c. 動畫的延時:animation-delay: 1s;
d. 播放狀態(tài):animation-play-state: paused|running;
e. 播放速度:animation-timing-function: linear;
f. 播放次數(shù) 反復(fù):animation-iteration-count: 1;
g. 動畫播放完結(jié)后的狀態(tài):animation-fill-mode: forwards;
h. 循環(huán)播放時，交叉動畫:animation-direction: alternate;
先來看個簡單的demo
嘗試一下
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 1100px;
height: 900px;
overflow: hidden;
animation: dropdown 6s linear infinite;
}
.container {
position: absolute;
left: 0;
width: 25300px;
height: inherit;
animation: move 2s steps(23) infinite ;
}
.container img {
float: left;
width: 1100px;
height: 900px;
}
@keyframes move{
to{
left: -25300px;
}
}
@keyframes dropdown{
0%{
top: -1900px;
}
40%,70%{
top: 0;
}
100%{
top: 1900px;
}
}
.txt {
position: absolute;
left: -236px;
width: 300px;
font-size: 48px;
color: orange;
text-shadow: 0 0 18px deeppink;
writing-mode: vertical-rl;
animation: gogogo 10s ease-in infinite;
}
@keyframes gogogo{
from{
top: -500px;
}
to{
top: 1000px;
}
}
.wrapper:before {
position: absolute;
left: 0;
z-index: 99;
content: "";
width: 8px;
height: 900px;
background: deepskyblue;
box-shadow: 0 0 10px 4px skyblue;
animation: line 6s infinite alternate;
}
.wrapper:after {
position: absolute;
right: 0;
z-index: 99;
content: "";
width: 8px;
height: 900px;
background: deepskyblue;
box-shadow: 0 0 10px 4px skyblue;
animation: line 6s infinite alternate;
}
@keyframes line{
from{
height: 0;
}
to{
height: 900px;
}
}
