[HTML5+CSS3]Transform详解

当前位置 : 首页 > 网页制作 > CSS > [HTML5+CSS3]Transform详解

[HTML5+CSS3]Transform详解

来源: 作者: 时间:2016-01-20 09:22
Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭


Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。

语法:

   transform : none |  [  ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

取值:

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ,他有几个属性值参数:rotate;translate;scale;skew;matrix。下面我们分别来介绍这几个属性值参数的具体使用方法:

一、旋转rotate

rotate(

  • 为了效果更好一点,我们给上面的导航菜单加上一点样式:

     .menu ul {
    border-top: 15px solid black;
    padding: 0 10px;
    }
    .menu ul li a{
    color: #fff;
    float: left;
    margin: 0 5px;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 65px;
    padding: 10px 5px;
    background: #151515;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    text-shadow: 0 1px 1px #686868;
    text-decoration: none;
    }
    .menu ul li.translate a{
    background: #2EC7D2;
    }
    .menu ul li.translate-x a {
    background: #8FDD21;
    }
    .menu ul li.translate-y a {
    background: #F45917;
    }
    .menu ul li.rotate a {
    background: #D50E19;
    }
    .menu ul li.scale a {
    background: #cdddf2;
    }
    .menu ul li.scale-x a {
    background: #0fDD21;
    }
    .menu ul li.scale-y a {
    background: #cd5917;
    }
    .menu ul li.skew a {
    background: #519;
    }
    .menu ul li.skew-x a {
    background: #D50;
    }
    .menu ul li.skew-y a {
    background: #E19;
    }
    .menu ul li.matrix a {
    background: #919;
    }
    

    在这里我们使用了一些前面所进的CSS3的属性制作出来的导航,如果你跟着做的话,在你本地一定能看到一个非常靓丽的导航菜单,这里由于无法链接demo原页面,只好贴上缩略图,让大家有一个初步效果视觉初步的效果如下:

    \

    从效果图上我们可以清楚的看到菜单上我们分别对应的是transform中的Translate、TranslateX、TranslateY、Rotate、Scale、ScaleX、ScaleY、Skew、SkewX、SkewY和Matrix,下面我们就在相应的a:hover加上各自的效果:

    1、transform:translate(x,y):

     .menu ul li.translate a:hover {
    -moz-transform: translate(-10px,-10px);
    -webkit-transform: translate(-10px,-10px);
    -o-transform: translate(-10px,-10px);
    -ms-transform: translate(-10px, -10px);
    transform: translate(-10px,-10px);
    }
    

    效果:

    \

    2、transform:translateX(x)

     .menu ul li.translate-x a:hover {
    -moz-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    }
    

    效果:

    \

    3、transform:translateY(y)

     .menu ul li.translate-y a:hover {
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    }
    

    效果:

    \

    4、transform:rotate(角度值)

     .menu ul li.rotate a:hover {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    

    效果:

    \

    5、transform:scale(x,y)

     .menu ul li.scale a:hover {
    -moz-transform: scale(0.8,0.8);
    -webkit-transform: scale(0.8,0.8);
    -o-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
    }
    

    效果:

    \

    6、transform:scaleX(x)

     .menu ul li.scale-x a:hover {
    -moz-transform: scaleX(0.8);
    -webkit-transform: scaleX(0.8);
    -o-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
    transform: scaleX(0.8);
    }
    

    效果:

    \

    7、transform:scaleY(y)

     .menu ul li.scale-y a:hover {
    -moz-transform: scaleY(1.2);
    -webkit-transform: scaleY(1.2);
    -o-transform: scaleY(1.2);
    -ms-transform: scaleY(1.2);
    transform: scaleY(1.2);
    }
    

    效果:

    \

    8、transform:skew(x,y)

     .menu ul li.skew a:hover {
    -moz-transform: skew(45deg,15deg);
    -webkit-transform: skew(45deg,15deg);
    -o-transform: skew(45deg,15deg);
    -ms-transform: skew(45deg,15deg);
    transform: skew(45deg,15deg);
    }
    

    效果:

    \

    9、transform:skewX(x)

     .menu ul li.skew-x a:hover {
    -moz-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    }
    

    效果:

    \

    10、transform:skewY(y)

     .menu ul li.skew-y a:hover {
    -moz-transform: skewY(30deg);
    -webkit-transform: skewY(30deg);
    -o-transform: skewY(30deg);
    -ms-transform: skewY(30deg);
    transform: skewY(30deg);
    }
    

    效果:

    \

    11、transform:matrix(a,b,c,d,e,f)

     .menu ul li.matrix a:hover {
    -moz-transform: matrix(1,1,-1,0,0,0);
    -webkit-transform: matrix(1,1,-1,0,0,0);
    -o-transform: matrix(1,1,-1,0,0,0);
    -ms-transform: matrix(1,1,-1,0,0,0);
    transform: matrix(1,1,-1,0,0,0);
    }
    

    效果:

    \

    transform中的matrix是相对的复杂,如果感兴趣的朋友可以点这里进去学民更多有关于Matrix的用法,我在这里就不多说了,说了也讲不清楚。

    下面我们来看看最终的效果图,如果你在本地跟着这个实例做了的话,那么你就能看到非常好的效果了。

    \

    上面的实例效果展示了有关于transform中各种风格效果,这里需要提醒大家,我们上面的效果都是以元素自身的中心点为基点的,下面我们来看一个改变元素基点的实例

    我们在前面的实例基础改变一下所有a标签基点位置为left top(前面默认是center center)

     .menu ul li.transform-origin a {
    -moz-transform-origin: left top;
    -webkit-transform-origin: left top;
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    }
    

    大家一起看看改变了a标签基点后transform下各种效果有什么样的变化:

    \

    从效果图中大家可以明显的看出,改变元素的基点后。元素进行transform任何属性值的设置都会有影响,换句话说,我们transform进行任何动作变化都是以元素的中心为基点,同时我们可以通过transform-origin来改变任何元素的基点,从而达到不同的效果。感兴趣的朋友可以去了解更多有关这方面的知识。

    最后我们再来看一个transform运用多个属性值的效果实例

     .demo a{
    width: 100px;
    padding: 5px;
    background: red;
    display: block;
    }
    .demo a:hover {
    -moz-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
    -webkit-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
    -o-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
    -ms-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
    transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
    }
    

    这里需要注意的是使用多个属性值时,其之间不能用逗号(“,”)分隔,必须使用空格分隔,记住了是空格分隔,如上面代码所示。

    那么到这有关于CSS3的transform就介绍完了。那么到目前为止我们一起学习了CSS3中的:渐变CSS3 Gradient、透明色CSS3 RGBA、圆角CSS3 Border-radius、文字阴影CSS3 Text-shadow、边框阴影CSS3 Box-shadow和今天的变形transform六个属性的使用方法。那么下一节我们将一起学习CSS3动画中的另一个属性Transition的使用方法,对CSS3感兴趣的朋友,请观注本站的更新。

    下面为了大家更方便学习本站有关于CSS3的知识,特把相关链接列出

    Tag:

    相关文章

    网友评论
    
    <