css3（八）2D、3D轉換、過渡
阿新 • • 發佈：2019-02-19
transform屬性向元素應用2D或3D轉換
- 2D轉換方法：
translate() 移動
rotate() 旋轉
scale() 縮放
skew() 傾斜
transform-origin:x-axis y-axis z-axis;改變中心點
matrix() 方法把所有 2D 轉換方法組合在一起
示列
transform:translate(100px, 100px);
transform:rotate(90deg);
transform: scale(0.5,0.5);
transform:skew(10deg, 10deg);
transform-origin - 3D轉換方法：
rotateX()
rotateY()
rotateZ() - 過渡
transition：設定四個過渡屬性
transition-property：過渡名稱
transition-duration：過渡效果花費的時間
transition-timing-function：過渡效果的時間曲線
transition-delay：過渡效果開始時間
示列
div{
transition:width 2s ease 2s,height 2s ease 2s,transform 2s ease 2s;
}transition-timing-function ：常用值
linear：規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease：規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in：規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out：規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out：規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。
練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
margin-bottom: 20px;
background: linear-gradient(to right,blue,yellow)