CSS3 Transform

最新推荐文章于 2024-06-25 11:57:05 发布

thingir

最新推荐文章于 2024-06-25 11:57:05 发布

阅读量670

点赞数

分类专栏： CSS 文章标签： css3

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在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>

thingir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Transform

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法：transform ： none | <transform-function> [ <transform-function> ]*//也就是:transform: rotate | scale | skew | translate |matrix;
复制链接

扫一扫

专栏目录