一其障、2D形變
平移
transform:translate（x，y）
相對當前位置涂佃，向左移動x像素励翼，像下移動y像素
transform:translateX（num）
相對當前位置，向左移動num像素
transform:translateY（num）
相對當前位置巡李，向下移動num像素
縮放
transform:scale(x抚笔，y)
scale()方法扶认，該元素增加或減少的大小侨拦，取決于寬度（X軸）和高度（Y軸）的參數(shù)
transform:scaleX( num )
改變元素的寬度
transform:scaleY( num )
改變元素的高度
旋轉(zhuǎn)
transform:rotate( 角度 );
參數(shù)是一個角度，表示旋轉(zhuǎn)多少度
傾斜
transform:skew（角度x辐宾，角度y）
沿著x軸旋轉(zhuǎn)多少度狱从，沿著y軸轉(zhuǎn)多少度
transform:skewX（角度x）
沿著x軸旋轉(zhuǎn)多少度
transform:skewY（角度y）
沿著y軸旋轉(zhuǎn)多少度
二、3D形變
平移
transform:translate3d( x , y , z );
定義三個方向上的平移
transform:translateZ( z );
定義Z方向的平移（單用看不出效果）
縮放
transform: scale3d( x , y , z);
定義3個方向上的縮放叠纹，同時可以分別實現(xiàn)3個方向的分別設(shè)置
旋轉(zhuǎn)
rotate3d( x , y , z , angle )
x季研，表示旋轉(zhuǎn)軸X坐標方向的矢量。
y誉察，表示旋轉(zhuǎn)軸Y坐標方向的矢量与涡。
z，表示旋轉(zhuǎn)軸Z坐標方向的矢量持偏。
angle驼卖，表示旋轉(zhuǎn)角度。正的角度值表示順時針旋轉(zhuǎn)鸿秆，負值表示逆時針旋轉(zhuǎn)酌畜。
三、過渡
transition屬性
通過transition卿叽，我們可以在不使用flash的情況下桥胞，讓元素從一種樣式變化成另一種樣式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
height: 100px;
width: 100px;
background-color: skyblue;
transition: margin-left 3s;
}
</style>
</head>
<body>
<!-- 通過transition，我們可以在不使用flash的情況下考婴，當元素從一種樣式變化成另一種樣式 -->
<div id="box"></div>
<script type="text/javascript">
// var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
}
</script>
</body>
</html>
運行效果
GIF.gif
transition實現(xiàn)多個過渡
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果動畫的元素是margin贩虾，不能設(shè)置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
</style>
</head>
<body>
<!-- 通過transition，我們可以在不使用flash的情況下沥阱，當元素從一種樣式變化成另一種樣式 -->
<div id="box"></div>
<div id="box1"></div>
<script type="text/javascript">
//var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
this.style.backgroundColor = "red";
this.style.borderRadius = "50px";
this.style.top = "100px";
}
</script>
</body>
</html>
運行效果
GIF.gif
利用偽元素實現(xiàn)transition過度
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果動畫的元素是margin整胃，不能設(shè)置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
#box:hover{
background-color: purple;
border-radius: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
運行結(jié)果
GIF.gif
利用transition實現(xiàn)3D動畫過度
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果動畫的元素是margin，不能設(shè)置auto*/
height: 300px;
width: 300px;
margin: 15px 0 0 15px;
position: relative;
background: url(img/bg.jpg) round;
/*將來寫有關(guān)動畫相關(guān)的代碼，要寫兼容*/
/*transform-style: preserve-3d;*/
/*設(shè)置鏡頭距離*/
perspective: 20000px;
}
div img{
width: 130px;
height: 200px;
position: absolute;
top: 50px;
left: 85px;
transform-style: preserve-3d;
transform: rotateZ(180deg) rotateX(0) rotateY(0deg);
transition: all 3s;
}
div img:hover{
transform: rotateZ(0) rotateX(360deg) rotateY(180deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
運行結(jié)果
GIF.gif
css3動畫
如果用@keyframes 創(chuàng)建動畫屁使，把它綁定到一個選擇器在岂，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規(guī)定動畫的名稱
規(guī)定動畫的時長
from-to
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
height: 30px;
width: 30px;
background-color: blue;
animation: rect 3s linear 0.5s alternate 3 ;
}
@keyframes rect{
from{
transform: translate(0,0);
background-color: blue;
}
to{
transform: translate(200px,200px);
background-color: red;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
運行效果
GIF.gif
百分比
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
height: 50px;
width: 50px;
background-color: blue;
animation: rect 3s linear infinite alternate;
}
@keyframes rect{
0%{
transform: translate(0,0);
background-color: blue;
}
25%{
transform: translate(300px,0px);
background-color: red;
border-radius: 50%;
}
50%{
transform: translate(300px,300px);
background-color: pink;
border-radius: 0;
}
75%{
transform: translate(0px,300px);
background-color: orange;
border-radius: 50%;
}
100%{
transform: translate(0px,0px);
background-color: yellow;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
運行效果
GIF.gif
小案例（動畫實現(xiàn)一個簡易大風車）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.circle{
height: 200px;
width: 200px;
margin: 50px auto;
background-color: pink;
border-radius: 50%;
position: relative;
animation: rect 2s linear infinite;
}
.f1{
height: 80px;
width: 50px;
background-color: blue;
position: absolute;
left: 100px;
top: 20px;
border-top-right-radius: 100%;
}
.f2{
width: 80px;
height: 50px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
border-bottom-right-radius: 100%;
}
.f3{
height: 80px;
width: 50px;
background-color: orange;
position: absolute;
left: 50px;
top: 100px;
border-bottom-left-radius: 100%;
}
.f4{
height: 50px;
width: 80px;
background-color: green;
position: absolute;
left: 20px;
top: 50px;
border-top-left-radius: 100%;
}
@keyframes rect{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
</div>
</body>
</html>
運行結(jié)果
GIF.gif
喜歡就點贊
