CSS3新增特效

最新推荐文章于 2024-09-14 17:04:32 发布

仙鹤__

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量101

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130180766

版权

CSS3 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

1.1.1 css3中2D转换动画效果

2D变换方法：

translate()
rotate()
scale()
skew()
matrix()

转换属性

2D变换方法

1.1.1.1 translate(x,y) 移动

语法：

transform:translate(<x> [,<y>]);

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:10px auto;
            /* 过渡动画 */
            transition:all 0.5s;
        }
        .box:hover{
            /* 移动 */
            /* transform: translate(50px,0); */
            /* transform:translate(0,50px); */
            /* transform: translateX(50px); */
            transform: translateY(50px);
        }
    </style>
</head>
<body>
    <div class="box"></div>

1.1.1.2 scale(x,y) 缩放

语法：

transform:skew(<x> [,<y>]);

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:10px auto;
            /* 过渡动画 */
            transition:all 0.5s;
        }
        .box2:hover{
            /* 缩放 */
            /* transform:scale(50%,40%); */
            /* transform: scale(2,3); */
            /* transform:scaleX(0.5); */
            transform:scaleY(0.2);

        }
    </style>
</head>
<body>
    <div class="box box2"></div>

1.1.1.3 rotate(angle) 转动

语法：

transform:rotate(<angle>);

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to left,red,blue);
            margin:10px auto;
            /* 过渡动画 */
            transition:all 0.5s;
        }
        .box:hover{
            /* 旋转 */
            /* transform: rotate(360deg); */
            /* transform: rotate(-180deg); */
            transform: rotate(0.5turn);
        }
    </style>
</head>
<body>
    <div class="box box3"></div>

1.1.1.4 skew(x-angle,y-angle) 拉长或拉伸

语法：

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color:red;
            margin:10px auto;
            /* 过渡动画 */
            transition:all 0.5s;
        }
        .box:hover{
            /* 拉伸 */
            /* transform:skew(30deg,20deg); */
            /* transform: skewX(30deg); */
            transform: skewY(20deg);
        }
    </style>
</head>
<body>
    <div class="box box4"></div>