css动画效果之transform

小仓桑

已于 2023-01-12 10:29:29 修改

阅读量3.9k

点赞数 5

分类专栏： CSS动画文章标签： css html css3 Powered by 金山文档

于 2023-01-12 09:58:01 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/128653938

版权

CSS动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

旋转rotate、扭曲skew、移动translate、缩放scale、矩阵变形matrix

属性名	扩展写法	属性含义
none		定义不进行转换。
rotate	rotateX()（3D写法）rotateY()（3D写法）	定义旋转，在参数中规定角度。
translate	translateX()、translateY()	定义平移，在参数中x，y轴像素位置。
scale	scaleX(x,1)、scaleY(1,Y)	定义缩放，参数大于1元素就放大，反之其值小于1为缩小。
skew(x,y)	skewX(x)， skewY(y)	定义扭曲，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度

rotate

定义旋转，在参数中规定角度。

写法

transform:rotate(30deg);

效果

translate

定义平移，在参数中x，y轴像素位置。

写法

/*只对x轴进行平移*/
translate(10px);
/*只对x轴及y轴进行平移*/
translate(20px,10px)

效果

scale

定义缩放，参数大于1元素就放大，反之其值小于1为缩小。

写法

/*只对x轴及y轴进行缩放*/
transform: scale(1.5,2.0);
transform: scale(1.5);

效果

skew

定义扭曲，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

写法

/*只对x轴及y轴进行扭曲*/
transform: skew(10deg,10deg)

效果

代码集合效果展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day03</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
<div class="boxBody">
    <button class="boxRotate">rotate</button>
    <button class="boxTranslate">translate</button>
    <button class="boxScale">scale</button>
    <button class="boxSkew">skew</button>
    <div class="box"></div>
</div>
</body>
<script>
    $(".boxRotate").on('click', () => {
        $(".box").css("rotate", "20deg")
    })
    $(".boxTranslate").on('click', () => {
        $(".box").css("translate", "100px 100px")
    })
    $(".boxScale").on('click', () => {
        $(".box").css("scale", "1.5")
    })
</script>
<style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box {
        height: 200px;
        width: 200px;
        background-color: salmon;
    }
</style>
</html>