CSS3变形详情介绍

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 transform

transform属性让元素在一个坐标系统中变形，包括一系列变形函数，可以移动，旋转和缩放元素。

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