2498次阅读
各种变形效果
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;
}
这个例子很简单吧，看看就懂了，我就不解释了！
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录