1227次阅读
各种变形效果

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元哦!
评论请先登录