首頁 > web前端 > html教學 > CSS3 变形记_html/css_WEB-ITnose

CSS3 变形记_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:40:56
原創
1059 人瀏覽過

CSS3 变形

  CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数。

transform

  transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform:none | <transform-function> [<transform-function>] *
登入後複製

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    div{                    width:100px;        height:100px;        margin:40px;        position:absolute;        opacity:1;        background:rgb(0, 148, 255);    }    .box2{        background:rgb(0, 148, 255);        opacity:.5;		/*旋转45度*/        transform:rotate(45deg);    }</style></head><body><div class="box1"></div> <div class="box2"></div> </body></html> 
登入後複製

  旋转

  缩放

.box2{	...	/*放大了1.5倍*/	transform:scale(1.5);}
登入後複製

  位移

.box2{	...	/*X轴与Y轴都移动150px*/	transform:translate(150px,150px);} 
登入後複製

  倾斜

.box2{	...	/*X轴倾斜30度*/	transform:skew(30deg);}
登入後複製

transform-origin

  用来指定元素的中心点位置。

transform-origin:x-axis y-axis z-axis
登入後複製

  transform进行变形时,默认是以元素自己中心点为原点进行变形的。通过transform-origin属性可以改变元素的中心点,从而以我们指定的点为中心点进行变形。

.box2{	...	transform-origin:left top;}
登入後複製

  上例中,元素的中心点从默认的中间点center改为左上角点left top。就是说以左上角的点为基点进行变形。很简单吧,其他位置的点俺就不一一示范了,另外transform-origin不能改变translate的中点。

transform-style

  transform-style属性规定如何在3D空间中呈现被嵌套的元素。

transform-style:flat | preserver-3d
登入後複製

  简单来说,就是能够创建一个3D空间。让子元素在3D空间中变形。

perspective

  perspective 属性用来设置用户和元素3D空间Z平面之间的距离。值越小,3D效果越明显。

perspective:none | number
登入後複製

  当元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D平面中。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    /*没有添加perspective时效果*/   #box1 div{        position:absolute;    }   #box1 div img{       transform-origin:bottom;   }   #box1 .box1-1 img{       opacity:.5;   }   #box1 .box1-2 img{       transform:rotateX(45deg);   }   /*添加perspective时效果*/   #box2 div{        position:absolute;        left:400px;        perspective:500px;    }   #box2 div img{       transform-origin:bottom;   }   #box2 .box2-1 img{       opacity:.5;   }   #box2 .box2-2 img{       transform:rotateX(45deg);   }</style></head><body><div id="box1">    <div class="box1-1"><img  src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" alt="CSS3 变形记_html/css_WEB-ITnose" ></div>    <div class="box1-2"><img  src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" alt="CSS3 变形记_html/css_WEB-ITnose" ></div></div><div id="box2">   <div class="box2-1"><img  src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" alt="CSS3 变形记_html/css_WEB-ITnose" ></div>   <div class="box2-2"><img  src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" alt="CSS3 变形记_html/css_WEB-ITnose" ></div></div></body></html> 
登入後複製

  可见,设置了perspective的元素,其3D效果更加明显了。

  另外,在3D变形中,除了perspective属性可以激活一个3D空间之外,在3D变形的函数中的perspective()也可以激活3D空间。不同的是,perspective属性用在父元素中,perspective()函数用在当前的子元素中,并且与transform中的其他的函数一起使用。如:

transform:rotate(45deg) perspective(500px);
登入後複製

  其效果是一样的。

perspective-origin

  用来决定perspective属性的起点位置就,简单说就是观看的视角。

perspective-origin: x-axis y-axis;
登入後複製

  perspective-origin与perspective属性一样,必须定义在父元素的元素上。换句话说,perspective-origin是与perspective结合使用的。

#box2 div{	...	perspective-origin:bottom right;}
登入後複製

  右下角效果

  左下角效果

  左上角效果

  右上角效果

  上角效果

  右角效果

  下角效果

  左角效果

  默认值,中角。

backface-visibility

  backface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时,该属性很有用。

backface-visibility:visible | hidden;
登入後複製

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    @keyframes rotate{        0%{            transform:rotateY(0deg);        }        100%{            transform:rotateY(360deg);        }    }           #box1,#box2{        width:300px;        height:400px;                  float:left;        margin:0 20px;        transform-style: preserve-3d;        animation:rotate 3s ease-in-out infinite alternate;   }   div div {        perspective: 1000px;        position:absolute;        top:0;        right:0;        bottom:0;        left:0;    }    #box1 div{           /*第一个图片背面不可见*/                 backface-visibility: hidden;    }   #box1 .box1-1,#box2 .box2-1{       background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;       z-index:2;   }   #box1 .box1-2,#box2 .box2-2{       background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;       transform:rotateY(180deg);   }</style></head><body><div id="box1">   <div class="box1-1"></div>   <div class="box1-2"></div></div><div id="box2">    <div class="box2-1"></div>    <div class="box2-2"></div></div></body></html> 
登入後複製

  两个图片正面时可见并无什么变化

  两个图片反面时,设置了背面不可见的图片隐藏了正面。

  将代码复制下来在浏览器中观看,可以更好了解。

CSS3 2D变形

2D位移

  translate()函数可以把元素从原来的位置移动。

translate(x-axis,y-axis);
登入後複製

  translate()函数可以取一个值x-axis,也可以取两个值x-axis,y-axis。
  当取一个值时,x-axis代表X轴移动的距离,正值时元素向右移动,负值向左移动。
  当取二个值是,x-axis一样;y-axis代表Y轴,正值时元素向下移动,负值向上移动。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>            @-webkit-keyframes translate{        from{            transform:translate(0);        }        20%{            transform:translate(100px);        }        40%{            transform:translate(100px,100px);        }        60%{            transform:translate(200px,100px);        }        80%{            transform:translate(200px,200px);        }        100%{            transform:translate(300px,200px);        }    }    @keyframes translate{        from{            transform:translate(0);        }        20%{            transform:translate(100px);        }        40%{            transform:translate(100px,100px);        }        60%{            transform:translate(200px,100px);        }        80%{            transform:translate(200px,200px);        }        100%{            transform:translate(300px,200px);        }    }    div{        width:100px;        height:100px;        background:hsl(102, 100%, 50%);        -webkit-animation:translate 1s ease infinite alternate;        animation:translate 1s ease infinite alternate;    }</style></head><body>	<div></div></body></html> 
登入後複製

  下面是两张图片的位移效果,建议将代码复制在浏览器中观看。


  

  如果要将对象沿着X轴或者Y轴方向移动,除了可以使用translate(x-axis,0)和translate(0,y-axis)来实现。还可以使用translateX()与translateY()两个函数。

translateX(100px)等于translate(100px,0)translateY(100px)等于translate(0,100px)
登入後複製

2D缩放

  缩放函数scale()让元素根据中心原点对元素进行缩放。

scale(x-axis,y-axis);
登入後複製

  scale()函数与translate()函数的语法相似,可以接受一个值,也可以接受两个值,只有一个值时,第二个值与第一个值一样,也就是说X轴与Y轴成比例缩放。默认值为1,当值小于1时,元素缩小;当值大于1时,元素放大。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>              @-webkit-keyframes scale{        from{            transform:scale(-3);        }                    100%{            transform:scale(5);        }    }             @keyframes scale{        from{            transform:scale(-3);        }                    100%{            transform:scale(5);        }    }    div{        position:absolute;        left:40%;        top:40%;        width:70px;        height:100px;        background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB24namdVXXXXbXXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 / 100% 100%;        -webkit-animation:scale 1s ease infinite alternate;        animation:scale 3s ease infinite alternate;    }</style></head><body><div></div></body></html> 
登入後複製

  scale()函数除了可以取正值,还可以取负值。负值时,会让元素翻转后再进行缩放。下面是两张动画片段,可以复制在浏览器中观看。

  除了能通过scale()函数使元素在X轴和Y轴进行缩放之外,还可以使用scaleX()与scaleY()两个函数分别在X轴与Y轴缩放。

scaleX(2)相当于scale(2,1)scaleY(2)相当于scale(1,2)
登入後複製

  另外,缩放函数默认是以中心点为原点进行变形,可以使用transform-origin函数,修改元素的中心点,使缩放函数的效果不同。

2D倾斜

  倾斜函数skew()能够让元素倾斜显示。与rotate()函数不同,rotate()函数只能旋转,不能改变元素形状;skew()函数不能旋转,当会改变元素形状。

skew(x-axis,y-axis)
登入後複製

  x-axis表示元素X轴倾斜的角度。
  y-axis表示元素Y轴倾斜的角度。

  与前几个函数一样,当只有一个值时,表示的是X轴进行倾斜;二个值时,X轴与Y轴同时倾斜。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    div {        width: 100px;        height: 100px;        background: hsl(102, 100%, 50%);        transform:skew(30deg);    }</style></head><body><div></div></body></html> 
登入後複製

  元素X轴倾斜效果

div {	...	transform:skew(0,30deg);}
登入後複製

  元素Y轴倾斜效果

div {	...	transform:skew(30deg,30deg);}
登入後複製

  元素X轴与Y轴同时倾斜效果

  除了使用scale()函数使X轴与Y轴倾斜之外,还可以使用scaleX()与scaleY()函数让元素在X轴与Y轴倾斜。

scaleX(30deg)等于scale(30deg,0)scaleY(30deg)等于scale(0,30deg)
登入後複製

  还可以使用transform-origin属性修改元素变形的中心点,让元素有不同的倾斜效果。

2D矩阵

  俺正在学习当中。点我我也要去学。

CSS3 3D变形

3D位移

  CSS3中3D位移主要包括两种函数translateZ()和translate3d()。

translateZ(z-axis);
登入後複製

  功能是让元素在3D空间沿Z轴进行位移。负值时,元素在视觉上感觉越来越远,导致元素变小;正值时,元素在视觉上感觉越来越近,导致元素变大了。代码效果translate3d()函数中。

translate3d(x-axis,y-axis,z-axis);
登入後複製

  translate3d()函数使一个元素在三维空间移动。是translateX(),translateY(),translateZ()三个函数的缩写,与translate()函数不同的是,translate()函数只能作用在X轴与Y轴上,也就是在二维平面上移动。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    @-webkit-keyframes translate3d {        0% {            transform: translate3d(-30px,-20px,-300px);        }        100% {            transform: translate3d(30px,20px,200px);        }    }    @keyframes translate3d {        0% {            transform: translate3d(-30px,-20px,-300px);        }        100% {            transform: translate3d(30px,20px,200px);        }    }    body {        transform-style: preserve-3d;        perspective: 1000px;    }    .box1 {        position:absolute;        width: 70px;        height: 100px;        background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;        -webkit-animation: translate3d 2s ease-in-out infinite alternate;        animation: translate3d 2s ease-in-out infinite alternate;        position:absolute;        top:30px;        left:20%;    }    .box2{        background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;        opacity:.5;        width: 70px;        height: 100px;        position:absolute;        top:30px;        left:20%;    }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 
登入後複製

  下面是两张动画片段,图中可以看出Z轴的移动对视觉上的效果。

3D缩放

  CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数。

scaleZ(z-axis);
登入後複製

  让元素在Z轴上按比例缩放。

scale3d(x-axis,y-axis,z-axis);
登入後複製

  是scaleX,scaleY,scaleZ三个函数的缩写,scaleZ(2)等于scale3d(1,1,2)。与scale函数不同的是,scale()是在二维平面上进行缩放。scale3d()在三维空间上进行缩放。scale3d()与scaleZ()要与其他函数一起使用才有效果。
  建议在使用transform调用函数时,scale3d()或scaleZ()要写在其他函数之前,不然也没有效果。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    @keyframes scale3d{        0%{            transform:scale3d(1,1,-10) rotateX(0);        }        100%{            transform:scale3d(1,1,2) rotateX(40deg);        }    }    html,body{        transform-style: preserve-3d;        perspective: 1200px;    }    div{        width: 70px;        height: 100px;        position:absolute;    }    .box1{        left:40%;        top:40px;        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;        z-index:2;        animation:scale3d 1s ease-in-out infinite alternate;    }    .box2{        left:40%;        top:40px;        opacity:.5;        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;    }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 
登入後複製

  下面是动画片段

3D旋转

  CSS3中3D旋转可以使用rotateX(),rotateY(),rotateZ()三个函数分别设置三维空间的旋转。也可以使用rotate3d()函数集中进行设置,因为效果都是一样的,俺就选rotate3d()函数来说。

rotate3d(x,y,z,deg);
登入後複製

  x,y,z代表旋转的三个轴,取值是0或1,0时代表这个轴不旋转,1时代表这个轴旋转。deg代表旋转的角度。

rotateX(45deg)等于rotate3d(1,0,0,45deg)rotateY(45deg)等于rotate3d(0,1,0,45deg)rotateZ(45deg)等于rotate3d(0,0,1,45deg)rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg)...
登入後複製

 

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    @keyframes rotate3d{        0%{            transform:rotate3d(0,0,0,0);        }        100%{            transform:rotate3d(1,1,1,45deg);        }    }    html,body{        transform-style: preserve-3d;        perspective: 1200px;    }    div{        width: 70px;        height: 100px;        position:absolute;    }    .box1{        left:40%;        top:40px;        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;        z-index:2;        animation:rotate3d 1s ease-in-out infinite alternate;    }    .box2{        left:40%;        top:40px;        opacity:.5;        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;    }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 
登入後複製

  下面是动画片段

3D矩阵

  学习中...

CSS3 变形就写到此了。

  总结一下最近写博客的感想。以前不写博客时,一本书几天就能看完,而且自己又光看不练,且又不爱复习,那过几天立马就忘得干净了。多次吃亏之下,决定写博客,做笔记。写博客的这几天,一个字“累”,以往看书时感觉不过尔尔,简单的很,等到自己写,就糟了,感觉左也不对,右也是错,这时才知道难啊。写出来后欢心鼓舞,好不快乐。写博客累,却是实在。子曰:学而不思则罔。唯有自己想出来,写下来,才不会迷惑。乡下人言语粗鄙,不知所云。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板