我要评论WEB设计师借助CSS3可以轻松实现倾斜，缩放，移动及翻转元素
1.变形简介CSS3变形时一些效果的集合，比如平移、旋转以及缩放效果，每个效果都称为变形函数（Transform Function），在CSS没有变形之前，这些效果需要依赖图片、Flash或JavaScript才能实现。而使用纯CSS来完成这些变形无须加载这些额外的文件，再一次提升了开发效率，提高了页面执行效率。
CSS变形属性及函数CSS变形结合CSS的transition和动画的keyframe产生一些动画效果。比如购物车添加物品的小球效果。
CSS3变形中具有X/Y可用的函数：translateX()、trannslateY()、scaleX()、scaleY()、skewX()、skewY()。 CSS3 2D变形函数包括：translate()，scale(),rotate()，skew( ),.matrix() CSS3 3D变形包括： rotateX(),rotateY(),rotate3d(),translate3d(),scaleZ(),scale3d(),matrix3d()。 2.CSS变形属性详解 2.1 transformtransform属性让元素在一个坐标系统中变形，包括一系列变形函数，可以移动，旋转和缩放元素。
transform: none | [transform-function]*
可用于内联元素和块元素，默认值是none，表示元素不变形。或者一个或多个变形函数，变形函数用空格分隔开。
2D transform常用的变形函数
translate():移动元素 scale():缩小或放大元素，会使元素尺寸发生变化 rotate()：旋转元素 skew()：让元素倾斜 matrix():定义矩阵变形perspective()：指定一个透视投影矩阵
.svg-inline--fa{
transition: all 0.8s ease-in-out;
}
/*设置变形，逆时针旋转360度，放大1.5倍*/
.fa-comments:hover {
transform: rotate(-360deg) scale(1.5);
}
/*设置变形，舒适正旋转360度，缩小0.7倍,颜色变红*/
.fa-address-book:hover {
transform: rotate(360deg) scale(0.7);
color:red;
}
/*设置变形，Y轴倾斜90度消失*/
.fa-adn:hover {
transform: skewY(90deg);
}
点击产看：变形demo
2.2 transform-orign
transform-orign属性时用来指定元素的中心点位置。默认情况下，变形的原点在元素的中心点，或者是元素的X轴和Y轴的50%处。
没有使用trasnform-orign改变元素原点位置的情况下，CSS变形都是以元素自己中心位置进行变形的，trasnform-orign可以根据需要改变变形原点。
语法
一个值 transform-orign: x-offset | y-offset | offset-keyword 两个值transform-orign：x-offset y-offset | y-offset-keyword x-offset |更多组合三个值transform-orign：x-offset y-offset z-offset
transform-orign的属性值可以使百分比，em，px等具体的值，也可以是toop,right,bottom,left,center等关键字（offset-keyword）
.wrapper .content-one:hover {
transform: rotate(20deg);
}
.wrapper .content-two:hover {
transform-origin: 0px 0px;
transform: rotate(20deg);
}
点击查看demo
2.3 transform-style
需要设置在父元素中，并且高于任何嵌套的变形元素。
transform-style: flat | preserve-3d - flat:默认值，表示所有元素在2D平面展示 - preserve-3d：所有子元素在3d空间展示
.transform-style-wrappper {
height: 200px;
width: 200px;
background: #eee;
transform-style: preserve-3d;
}
.transform-style-wrappper .content {
height: 100px;
width: 100px;
border: 4px solid blue;
background: red;
}
.transform-style-wrappper .content:hover {
transform: perspective(200px) rotateX(20deg) ;
}
查看demo:transform-style
2.4 perspective
perspective对3d变形至关重要，该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2d平面上。如果不指定透视，则Z轴空间中的所有点都将平铺到一个2D平面上，并且变化结果中不存在景深的概念。
perspective: none | length 设置在变形父元素上
none: 默认值，表示无限的角度来看3D物体，但看上去是平的。 length:接受于高峰长度大于0的值，其单位不能是百分比。值越大，角度出现的越远，从而创建出一个相当低的强度和非常小的3D变化空间。反之值越小，角度出现的越近，从而创建出一个高强度的角度和一个大型3D变化。
.wrapper-perspective {
width: 50%
height: auto;
perspective: 1000px;
padding-bottom: 200px
}
.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(32deg);
background:red;
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,97,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front {
transform: translateZ(1em);
}
.top {
transform: rotateX(90deg) translateZ(1em);
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
}
.back {
transform: rotateY(-180deg) translateZ(1em);
}
点击查看：demo
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论