CSS3中对元素的变形和动画支持

最新推荐文章于 2021-09-16 19:25:22 发布

Solaris秋

最新推荐文章于 2021-09-16 19:25:22 发布

阅读量409

点赞数

分类专栏：前端网页设计文章标签： css3 css html html5

本文链接：https://blog.csdn.net/L1194774003/article/details/104162517

版权

变形

四种基本变换

位移变换 translate和所有以translate开头的函数都支持唯一变换
旋转变换 rotate和所有以torate开头的函数都支持唯一变换
缩放变换 scale和所有以scale开头的函数都支持唯一变换
倾斜变换 skew和所有以skew开头的函数都支持唯一变换

#可以为transform同时制定多个变形函数

具体的变换

transform该属性用于设置变形该属性支持一个或多个变形函数CSS3提供了如下变形函数

translate(tx[,ty]) 该函数设置html元素沿X轴移动tx距离，沿y轴移动ty距离。其中中括号内 y轴设置可以省略省略则代表yx为0
translate3d(tx,ty,tz)该函数设置html元素沿着X轴移动tx距离，沿着Y轴移动ty距离，沿着z轴移动tz距离（默认情况下元素没有被设置成3D元素，所以Z轴移动没有效果）
translateX(tx)该函数设置html元素沿着X轴移动tx距离（Y轴Z轴相同）

    <style type="text/css">
        *{
    
            margin:0;
            padding: 0;
        }
        div{
    
            display: inline-block;
            background: #ddd;
            border:1px solid black;
            width:60px;
            height:60px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div style="transform:translateX(100px)">元素左移100px</div><br>
    <div></div>
    <div style="transform:translateY(100px)">元素下移100px</div>

最低0.47元/天解锁文章

Solaris秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中对元素的变形和动画支持

变形四种基本变换位移变换 translate和所有以translate开头的函数都支持唯一变换旋转变换 rotate和所有以torate开头的函数都支持唯一变换缩放变换 scale和所有以scale开头的函数都支持唯一变换倾斜变换 skew和所有以skew开头的函数都支持唯一变换#可以为transform同时制定多个变形函数具体的变换transform该属性用于设置变形该属性支持...
复制链接

扫一扫