小言_互联网的博客

Css_过渡和2d变换

2020-04-01 15:16 276人阅读  评论(0)

参考内容：妙味课堂

Transition过渡
transition-property  要运动的样式  （all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式 
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

过渡完成事件 
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);

<script>
	var oBox=document.getElementById("box");
	oBox.οnclick=function()
	{
		this.style.width=this.offsetWidth+100+"px";
	};
	addEnd(oBox,function(){
		alert("end");	
	});
	function addEnd(obj,fn)
	{
		obj.addEventListener('WebkitTransitionEnd',fn,false);
		obj.addEventListener('transitionend',fn,false);
	}
</script>
//结束回调-永无止境
<script>
	var oBox=document.getElementById("box");
	oBox.οnclick=function()
	{
		this.style.width=this.offsetWidth+100+"px";
	};
	addEnd(oBox,function(){
		this.style.width=this.offsetWidth+100+"px";
	});
	function addEnd(obj,fn)
	{
		obj.addEventListener('WebkitTransitionEnd',fn,false);
		obj.addEventListener('transitionend',fn,false);
	}
</script>

//解决上述问题
<script>
	var oBox=document.getElementById("box");
	oBox.οnclick=function()
	{
		this.style.width=this.offsetWidth+100+"px";
		addEnd(oBox,end);
	};
	function end()
	{
		this.style.width=this.offsetWidth+100+"px";
		removeEnd(this,end);
	}
	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);
	}
</script>

2D变换
transform
rotate()  旋转函数 取值度数
deg  度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数 
skewX()
skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
translate() 位移函数
translateX()
translateY()
Transform 执行顺序问题 — 后写先执行

//倾斜的导航
<style>
ul{margin:0;padding:0; list-style:none;}
li{float:left;width:100px; text-align:center;height:30px;border:1px solid #fff; background:Red; font:12px/30px "宋体"; -webkit-transform:skewX(30deg); }
a{text-decoration:none;-webkit-transform:skewX(-30deg); display:block;}
</style>
<ul>
	<li><a href="#">妙味课堂</a></li>
    <li><a href="#">妙味茶馆</a></li>
</ul>

<style>
body{height:300px;border:1px solid #000;}
.box{width:100px;height:100px;background:Red;margin:10px; transition:1s;}
body:hover .box:nth-of-type(1){ -webkit-transform:translateX(100px) scale(0.5);}
body:hover .box:nth-of-type(2){ -webkit-transform:scale(0.5) translateX(100px);}
</style>
<body>
	<div class="box">111</div>
	<div class="box">222</div>
</body>

//钟表
<style id="css">
#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;left:99px;top:0; -webkit-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){ -webkit-transform:rotate(0);}
#wrap ul li:nth-of-type(2){ -webkit-transform:rotate(6deg);}
#wrap ul li:nth-of-type(3){ -webkit-transform:rotate(12deg);}
#wrap ul li:nth-of-type(4){ -webkit-transform:rotate(18deg);}
#wrap ul li:nth-of-type(5){ -webkit-transform:rotate(24deg);}
#wrap ul li:nth-of-type(6){ -webkit-transform:rotate(30deg);}
#wrap ul li:nth-of-type(7){ -webkit-transform:rotate(36deg);}
#wrap ul li:nth-of-type(8){ -webkit-transform:rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ 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:80px;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;}
</style>
<body>
<div id="wrap">
	<ul id="list">
    	<!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>
<script>
var oList=document.getElementById("list");
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var aLi="";
var sCss="";
for(var i=0;i<60;i++)
{
	sCss+="#wrap ul li:nth-of-type("+(i+1)+"){ -webkit-transform:rotate("+i*6+"deg);}";
	aLi+="<li></li>"
}
oList.innerHTML=aLi;
oCss.innerHTML+=sCss;
toTime();
setInterval(toTime,1000);
function toTime()
{
	var oDate=new Date();
	var iSec=oDate.getSeconds();
	var iMin=oDate.getMinutes()+iSec/60;
	var iHour=oDate.getHours()+iMin/60;
	oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";
	oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";
	oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";
};
</script>
</body>


matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放
x轴缩放 a=x*a    c=x*c     e=x*e;
y轴缩放 b=y*b   d=y*d     f=y*f;
通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
通过矩阵实现倾斜
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

//位移
<style>
body{height:300px;border:1px solid #000;}
.box{width:100px;height:100px;background:red; transition:1s;}
body:hover .box{ -webkit-transform:matrix(1,0,0,1,200,300);}
/*
	matrix(1,0,0,1,0,0)
	matrix(a,b,c,d,e,f);
	progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
	Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
	位移:
	x:e+disX
	y:f+disY

*/
</style>
<body>
<div class="box"></div>
</body>
//缩放
<style>
body{height:300px;border:1px solid #000;}
.box{width:100px;height:100px;background:red; transition:1s;}
/*
	matrix(1,0,0,1,0,0)
	matrix(a,b,c,d,e,f);
	progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
	Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
	位移:
	x:e+disX
	y:f+disY
	
	缩放:
	x轴缩放 a=x*a   c=x*c;
    y轴缩放 b=y*b   d=y*d;
*/
</style>
<body>
<div class="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.οnclick=function()
{
	oBox.style.WebkitTransform="matrix(0.5,0,0,0.2,0,0)";
	oBox.style.MozTransform="matrix(0.5,0,0,0.2,0,0)";
	oBox.style.transform="matrix(0.5,0,0,0.2,0,0)";
	oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= 0.5, M12= 0, M21= 0 , M22=0.2,SizingMethod='auto expand')";
}
</script>
<style>
body{height:300px;border:1px solid #000;}
.box{width:100px;height:100px;background:red; transition:1s;}
/*
	matrix(1,0,0,1,0,0)
	matrix(a,b,c,d,e,f);
	progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
	Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
	位移:
	x:e+disX
	y:f+disY
	
	缩放:
	x轴缩放 a=x*a   c=x*c;
    y轴缩放 b=y*b   d=y*d;
	
	x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
	y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

*/
</style>
<body>
<div class="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.οnclick=function()
{
	oBox.style.WebkitTransform="matrix(1,0,0.58,1,0,0)";
	oBox.style.MozTransform="matrix(1,0,0.58,1,0,0)";
	oBox.style.transform="matrix(1,0,0.58,1,0,0)";
	oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0.58, M21= 0 , M22=1,SizingMethod='auto expand')";
}
</script>
</body>
//旋转
<style>
body{height:300px;border:1px solid #000;}
.box{width:100px;height:100px;background:red; transition:1s;}
/*
	matrix(1,0,0,1,0,0)
	matrix(a,b,c,d,e,f);
	progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
	Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
	位移:
	x:e+disX
	y:f+disY
	
	缩放:
	x轴缩放 a=x*a   c=x*c;
    y轴缩放 b=y*b   d=y*d;
	
	x轴斜切: c=Math.tan(xDeg/180*Math.PI)
	y轴斜切: b=Math.tan(yDeg/180*Math.PI)
	
	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);
*/
</style>
<body>
<div class="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function()
{
	oBox.style.WebkitTransform="matrix(0.87,0.5,-0.5,0.87,0,0)";
	oBox.style.MozTransform="matrix(0.87,0.5,-0.5,0.87,0,0)";
	oBox.style.transform="matrix(0.87,0.5,-0.5,0.87,0,0)";
	oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= 0.87, M12= -0.5, M21= 0.5 , M22=0.87,SizingMethod='auto expand')";
	
	alert(this.offsetWidth);
}
</script>
</body>
//IE下基点修正
<style>
.box{width:100px;height:100px;margin:30px auto; position:relative;border:1px solid #000;}
#box{width:100px;height:100px;background:red; position:absolute;left:0;top:0;}
</style>
<body>
<div class="box">
	<div id="box"></div>
</div>
<script>
var oBox=document.getElementById("box");
var iDeg=0;
setInterval(function(){
	iDeg++;
	toRotate(oBox,iDeg);
},30);
function toRotate(obj,iDeg)
{
	var a=Math.round(Math.cos(iDeg/180*Math.PI)*100)/100;
	var b=Math.round(Math.sin(iDeg/180*Math.PI)*100)/100;
	var c=-b;
	var d=a;
	obj.style.WebkitTransform="matrix("+a+","+b+","+c+","+d+",0,0)";
	obj.style.MozTransform="matrix("+a+","+b+","+c+","+d+",0,0)";
	obj.style.transform="matrix("+a+","+b+","+c+","+d+",0,0)";
	obj.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11="+a+", M12= "+c+", M21= "+b+" , M22="+d+",SizingMethod='auto expand')";
	obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";
	obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";
}
</script>
</body>
//360导航
<style>
body{ background:#f9f9f9;}
#menu{width:50px;height:50px; position:fixed;right:20px; bottom:20px; }
#menu_list{height:42px;width:42px; position:relative;margin:4px;}
#menu_list img{ border-radius:21px; position:absolute;left:0;top:0; -webkit-transition:0.5s all ease;}
#home{width:50px;height:50px;background:url(home.png) no-repeat; border-radius:25px; position:absolute; left:0;top:0; transition:1s;}
</style>
<script>
window.οnlοad=function()
{
	var oHome=document.getElementById("home");
	var aImg=document.getElementById("menu_list").getElementsByTagName("img");
	var bOff=true;
	var iR=-150;
	for(var i=0;i<aImg.length;i++)
	{
		aImg[i].οnclick=function()
		{
			this.style.transition="0.3s";
			this.style.WebkitTransform="scale(2) rotate(-720deg)";
			this.style.opacity=0.1;
			addEnd(this,end);
		};
	}
	function end()
	{
		this.style.transition="0.1s";
		this.style.WebkitTransform="scale(1) rotate(-720deg)";
		this.style.opacity=1;
		removeEnd(this,end);
	}
	oHome.οnclick=function()
	{
		if(bOff)
		{
			this.style.WebkitTransform="rotate(-360deg)";
			for(var i=0;i<aImg.length;i++)
			{
				var oLt=toLT(iR,90/4*i);
				aImg[i].style.transition="0.5s "+i*100+"ms";
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				aImg[i].style.WebkitTransform="scale(1) rotate(-720deg)";
			}
		}
		else
		{
			this.style.WebkitTransform="rotate(0deg)";
			for(var i=0;i<aImg.length;i++)
			{
				aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				aImg[i].style.WebkitTransform="scale(1) rotate(0deg)";
			}
		}
		bOff=!bOff;
	};
};
function toLT(iR,iDeg)
{
	return {l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
}
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);
}
/*
	已知直角三角形的斜边长度和夹角 求对边(sin)和临边的长度
*/
</script>
<body>
<div id="menu">
	<div id="menu_list">
    	<img src="prev.png" alt=""/>
        <img src="open.png" alt="" />
        <img src="clos.png" alt="" />
        <img src="full.png" alt="" />
        <img src="refresh.png" alt="" />
    </div>
	<div id="home"></div>
</div>
</body>

 


转载：https://blog.csdn.net/weixin_42595216/article/details/101465785
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场