首页 > > 网页制作 > css >

01.CSS动画-->transform

2018-06-24 01:56:01来源：未知阅读 ()

transform:　　

　　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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有