设为首页 加入收藏

TOP

01.CSS动画-->transform
2017-10-11 14:02:22 】 浏览:8703
Tags:01.CSS 动画 --> transform

 

trannform:  

  translate(参数1,参数2);让元素在X轴与Y轴方向发生偏移-->参数1:X;参数2:Y

  rotate(参数1);让元素进行旋转;单位(deg)

  scale(参数1,参数2);让元素在X轴与Y轴放大或缩小多少倍-->参数1:X;参数2:Y

  skew(参数1,参数2);skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度

transition:过渡效果

  transition: all 1s linear 3s;

  *过渡效果

  参数1:用来指定对那些属性使用过渡效果
  参数2:过渡效果的持续时间
  参数3:过渡效果的显示速度变化
  参数4:用来指定过渡效果的延迟时间*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 100px;
            height: 100px;
            /*过渡效果
               参数1:用来指定对那些属性使用过渡效果
               参数2:过渡效果的持续时间
               参数3:过渡效果的显示速度变化
               参数4:用来指定过渡效果的延迟时间*/
            transition: all 1s linear 3s;
            border: 1px solid red;
            margin: auto;
            background-image: url("../../../img/f3_Android1.png");
            background-size: 100% 100%;
        }
        #div1:hover{
            /*translate:让元素在X和Y轴发生偏移 参数1:X轴方向偏移  参数2:Y轴方向偏移
              translatex:让元素在X轴方向发生偏移
              translatey:让元素在Y轴方向发生偏移*/
            /*transform: translate(50px,0);*/

            /*scale:让元素在X轴和Y轴都发生缩放  参数1:X轴方向的方法倍数 参数2:Y轴方向的放大倍数
              scaleX:让元素在X轴方向发生缩放
              scaleY:让元素在Y轴方向发生缩放*/
            transform: scaleX(1.5);

            /*rotate:让你的元素按照指定的中心点进行旋转
                rotateX:让元素沿着X轴旋转
                rotateY:让元素沿着Y轴旋转
            */
            /*transform: rotateY(180deg);*/

            /*transform: skewY(-90deg);*/

            /*transform-origin:用来设置旋转的中心点*/
            /*transform-origin: left;*/
        }
    </style>
    <title>变形效果</title>
</head>
<body>
<div id="div1">

</div>

</body>
</html>

  

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇翻译 | 关键CSS和Webpack: 减少阻.. 下一篇jquery仿京东商品页面

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目