CSS3的变形有移动、旋转、缩放、扭曲四种,来看个例子先:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>变形</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="normal">normal</div> <div class="normal translate">translate</div> <div class="normal rotate">rotate</div> <div class="normal scale">scale</div> <div class="normal skew">skew</div> </body>check the result
css:
.normal { width : 100px; height : 100px; background : red; margin-left : 100px; } .translate { transform : translate(100px, 0); /*chrome firefox opera ie*/ -ms-transform : translate(100px, 0); /*ie*/ -moz-transform : translate(100px, 0); /*firefox*/ -webkit-transform : translate(100px, 0); /*chrome 360 sogou baidu safari opera*/ -o-transform : translate(100px, 0); /*baidu*/ } .rotate { transform : rotate(45deg); /*chrome firefox opera ie*/ -ms-transform : rotate(45deg); /*ie*/ -moz-transform : rotate(45deg); /*firefox*/ -webkit-transform : rotate(45deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : rotate(45deg); /*baidu*/ } .scale { transform : scale(2, 0.5); /*chrome firefox opera ie*/ -ms-transform : scale(2, 0.5); /*ie*/ -moz-transform : scale(2, 0.5); /*firefox*/ -webkit-transform : scale(2, 0.5); /*chrome 360 sogou baidu safari opera*/ -o-transform : scale(2, 0.5); /*baidu*/ } .skew { transform : skew(45deg, 0deg); /*chrome firefox opera ie*/ -ms-transform : skew(45deg, 0deg); /*ie*/ -moz-transform : skew(45deg, 0deg); /*firefox*/ -webkit-transform : skew(45deg, 0deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : skew(45deg, 0deg); /*baidu*/ }
移动的话就是用translate,两个属性,x方向和y方向。同样有浏览器兼容性问题。旋转是rotate,只有一个参数就是度数。缩放是scale,两个参数,x方向的缩放因子和y方向的缩放因子。扭曲是skew,两个参数,x方向的扭曲角度和y方向的扭曲角度。
这里默认时所有的变形都是以中心点位变化原点,那么能不能改变变化原点呢?当然可以,我们试着改变一下,还是原来的变化,只是把变化原点改为左上角:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>变形</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="normal">normal</div> <div class="normal translate">translate</div> <div class="normal rotate">rotate</div> <div class="normal scale">scale</div> <div class="normal skew">skew</div> </body>check the result
css:
.normal { width : 100px; height : 100px; background : red; margin-left : 100px; transform-origin : top left; -ms-transform-origin : top left; -moz-transform-origin : top left; -webkit-transform-origin : top left; -o-transform-origin : top left; } .translate { transform : translate(100px, 0); /*chrome firefox opera ie*/ -ms-transform : translate(100px, 0); /*ie*/ -moz-transform : translate(100px, 0); /*firefox*/ -webkit-transform : translate(100px, 0); /*chrome 360 sogou baidu safari opera*/ -o-transform : translate(100px, 0); /*baidu*/ } .rotate { transform : rotate(45deg); /*chrome firefox opera ie*/ -ms-transform : rotate(45deg); /*ie*/ -moz-transform : rotate(45deg); /*firefox*/ -webkit-transform : rotate(45deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : rotate(45deg); /*baidu*/ } .scale { transform : scale(2, 0.5); /*chrome firefox opera ie*/ -ms-transform : scale(2, 0.5); /*ie*/ -moz-transform : scale(2, 0.5); /*firefox*/ -webkit-transform : scale(2, 0.5); /*chrome 360 sogou baidu safari opera*/ -o-transform : scale(2, 0.5); /*baidu*/ } .skew { transform : skew(45deg, 0deg); /*chrome firefox opera ie*/ -ms-transform : skew(45deg, 0deg); /*ie*/ -moz-transform : skew(45deg, 0deg); /*firefox*/ -webkit-transform : skew(45deg, 0deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : skew(45deg, 0deg); /*baidu*/ }
大家可以对比看看效果,相信很快就能理解transform-origin的意思。
那么基于transform和之前学过的一些文字特效,我们可以做出一些有意思的效果,比如说镜像:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>变形</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="mirror" title="mirror font">mirror font</div> </body>check the result
css:
@font-face { font-family: 'naughty_cartoonsregular'; src: url('Naughty Cartoons-webfont.eot'); src: url('Naughty Cartoons-webfont.eot?#iefix') format('embedded-opentype'), url('Naughty Cartoons-webfont.woff2') format('woff2'), url('Naughty Cartoons-webfont.woff') format('woff'), url('Naughty Cartoons-webfont.ttf') format('truetype'), url('Naughty Cartoons-webfont.svg#naughty_cartoonsregular') format('svg'); font-weight: normal; font-style: normal; } .mirror { font-family : 'naughty_cartoonsregular'; position : relative; color : red; opacity : 0.7; } .mirror:before { content : attr(title); position : absolute; top : 100%; transform : scale(1, -1); /*chrome firefox opera ie*/ -ms-transform : scale(1, -1); /*ie*/ -moz-transform : scale(1, -1); /*firefox*/ -webkit-transform : scale(1, -1); /*chrome 360 sogou baidu safari opera*/ -o-transform : scale(1, -1); /*baidu*/ } .mirror:after { content : ''; background : -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); width : 100%; height : 100%; position : absolute; top : 100%; left : 0px; }
这个例子看懂了吗?我们设置scale的y因子为-1,这样就相当于镜像了,而为了实现渐变效果,我们用了一个白色透明度从1变为0的东西叠加到镜像上面,就形成了这种效果。这里可能大家最不理解的就是before和after了,这也是前端常用的一个技巧,大家可以打开chrome的Elements看看,会不会多出一个::before和::after呢?
补充一个before和after的简单例子:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>变形</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="normal">normal</div> </body>check the result
css:
.normal:before { content : 'before'; color : red; } .normal:after { content : 'after'; color : blue; }
这个例子很简单吧,看看就懂了,我就不解释了!