零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==dCSS3扇形導航
See the Pen WQbqeR by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
