CSS3 Transform

来源：互联网发布：js正则表达式实例编辑：程序博客网时间：2024/06/05 19:08

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法：

transform ： none | <transform-function> [ <transform-function> ]*//也就是:transform: rotate | scale | skew | translate |matrix;

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

一、旋转rotate
如：transform:rotate(30deg):
二、移动translate
分为三种情况：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；如 transform:translate(100px,20px)
translateX(x)仅水平方向移动（X轴移动）；如 transform:translateX(100px)
translateY(Y)仅垂直方向移动（Y轴移动）；如：transform:translateY(20px)
三、缩放scale
有三种情况：
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；如 transform:scale(2,1.5):如果没有设Y值，则表示X，Y两个方向的缩放倍数是一样的，并以X为准。
scaleX(x)元素仅水平方向缩放（X轴缩放）；如：transform:scaleX(2)
scaleY(y)元素仅垂直方向缩放（Y轴缩放）；transform:scaleY(2)
但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
四、扭曲skew
有三种情况：
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；如：transform:skew(30deg,10deg)如果没有设置第二个参数，那么Y轴为0deg；
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；如：transform:skewX(30deg)
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），如：transform:skewY（10deg）。

最后我们再来看一个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); }

实验案例：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS3动画</title><style> .menu ul {    border-top: 15px solid black;    padding: 0 10px;     list-style:none;    } .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; }  .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);  }   .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);           }  .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);           }   .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);           }   .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);           }   .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);            }   .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);            }    .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);            }   .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);            }    .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);           }  .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);           }  /*在前面的实例基础改变一下所有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;  }</style></head><body>  <div class="menu">    <ul class="clearfix">      <li class="item translate"><a href="#">Translate</a></li>      <li class="item translate-x"><a href="#">TranslateX</a></li>      <li class="item translate-y"><a href="#">TranslateY</a></li>      <li class="item rotate"><a href="#">Rotate</a></li>      <li class="item scale"><a href="#">Scale</a></li>      <li class="item scale-x"><a href="#">ScaleX</a></li>      <li class="item scale-y"><a href="#">ScaleY</a></li>      <li class="item skew"><a href="#">Skew</a></li>      <li class="item skew-x"><a href="#">SkewX</a></li>      <li class="item skew-y"><a href="#">SkewY</a></li>      <li class="item matrix"><a href="#">Matrix</a></li>    </ul>  </div></body></html>

0 1