零CSS3筆記 | transition | transform

延遲執行：

transition: 1s width,2s 3s height; /*3s表示延遲3s後執行*/

效果：

ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

transition结束后执行，函数封装

function addEnd(obj, fn)
{
  obj.addEventListener('WebkitTransitionEnd', fn, false);
  obj.addEventListener('transitionend', fn, false);
}
function removeEnd(obj, fn)
{
  obj.removeEventListener('WebkitTransitionEnd', fn, false);
  obj.removeEventListener('transitionend', fn, false);
}

---

1、2D變換transform 旋轉 -- rotate

/*以XY軸中心點旋轉*/
.box:hover{-webkit-transform: rotate(360deg)}

/*以X軸中心點旋轉*/
.box:hover{-webkit-transform: rotateX(360deg)}

/*以X軸中心點旋轉*/
.box:hover{-webkit-transform: rotateY(360deg)}

/*自定義位置旋轉，變換旋轉焦點，父元素設定*/
.box{-webkit-transform-origin: 10px 10px;}  /*right top;*/
.box:hover{-webkit-transform: rotate(360deg)}

2、transform斜切 -- skew
注：倾斜函数 必須是block塊才可設置生效

/*沿X軸，即橫向平行四邊行*/
.box:hover{-webkit-transform: skewX(60deg)}

/*沿Y軸，即豎向平行四邊行*/
.box:hover{-webkit-transform: skewY(60deg)}

/*同時設定*/
.box:hover{-webkit-transform: skew(15deg,30deg)}

3、transform縮放 -- scale
注：缩放函数 取值 正数、负数和小数

.box:hover{-webkit-transform: scale(2,3);}

/*
-webkit-transform: scaleX(2);
-webkit-transform: scaleY(3);
*/

4、transform位移 -- translate

-webkit-transform: translate(100px,200px)

/*
-webkit-transform: translateX(100px);
-webkit-transform: translateY(100px);
*/

注意：transform執行順序，後寫的先執行：

.box:hover{-webkit-transform: translateX(100px) scale(0.5)  /*注意，后写的先执行*/}

ex1鐘表:
思路：60條秒鐘線使用li自動生成，一圈360deg，每秒rotate(6deg)，時線、分線、秒線分別定位居中，使用-webkit-transform-origin: bottom 使用變換焦點在底部，每隔5分鐘，為一長條，所以選擇器是5n+1;

<div id="wrap">
    <ul id="list">
        
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>

#wrap{width:200px;height:200px;border:2px solid #000;margin:100px auto;border-radius:50%;position:relative}
#wrap ul{margin:0;padding:0;height:200px;position:relative;list-style:none}
#wrap ul li{width:2px;height:6px;background:#000;position:absolute;top:0;left:99px;-webkit-transform-origin:center 100px}
#wrap ul li:nth-of-type(5n+1){width:2px;height:12px}
#hour{width:6px;height:45px;background:#000;position:absolute;left:97px;top:55px;-webkit-transform-origin:bottom}
#min{width:4px;height:65px;background:#999;position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom}
#sec{width:2px;height:85px;background:red;position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom}
.ico{width:20px;height:20px;background:#000;border-radius:50%;position:absolute;left:90px;top:90px}

var wrap = document.getElementById('wrap')
var list = document.getElementById('list')
var css = document.getElementById('css') //給style加id
var hour = document.getElementById('hour')
var min = document.getElementById('min')
var sec = document.getElementById('sec')
var li = ''; //創建li
var ccss = '' // 動態創建css

for (var i = 0; i < 60; i++) {
  li += '<li></li>'
  ccss += '#wrap ul li:nth-of-type(' + (i + 1) + '){-webkit-transform: rotate(' + i * 6 + 'deg);}'   //#wrap ul li:nth-last-of-type(1){-webkit-transform: rotate(0);}
}
list.innerHTML = li;
css.innerHTML += ccss;
toTime()
setInterval(toTime, 1000)
function toTime() {
  var _date = new Date()
  var isec = _date.getSeconds();
  var imin = _date.getMinutes() + isec / 60;
  var ihour = _date.getHours() + imin / 60;
  sec.style.WebkitTransform = 'rotate(' + isec * 6 + 'deg)' //每秒走6deg
  min.style.WebkitTransform = 'rotate(' + imin * 6 + 'deg)' //每分钟走6deg
  hour.style.WebkitTransform = 'rotate(' + ihour * 30 + 'deg)' //每小时走30deg
}

4、transform矩阵函数 -- matrix

/*未完，待更*/

matrix(a,b,c,d,e,f)
a    c    e        x        ax    cy    e
b    d    f    *   y    =   bx    dy    f
0    0    1                 0     0     1

所以，變換後水平座標： ax + cy + e
          垂直座標： bx + dy + f

默認下公式 ：  transform: matrix( scaleX(),0,0,scaleY(),translateX(),translateY() );

縮放：scale
x轴缩放 a=x*a    c=x*c     e=x*e;
y轴缩放 b=y*b   d=y*d     f=y*f;

位移：translate()
x轴位移: e=e+x
y轴位移: f=f+y

旋轉:rotate()：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

斜切：skew():
matrix(1,tan(θy),tan(θx),1,0,0)
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI); 
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

CSS3扇形導航

See the Pen WQbqeR by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>