H5/C3之2D转换

最新推荐文章于 2023-08-28 19:04:53 发布

zhy0509

最新推荐文章于 2023-08-28 19:04:53 发布

阅读量731

点赞数

分类专栏： HTMI

本文链接：https://blog.csdn.net/zhy0509/article/details/78595579

版权

HTMI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、2D转换
1.translate 移动（左负右正，上负下正）

用法：

（1）transform：translate（300px,200px）;
表示水平向右平移300px,竖直向下平移200px

（2）transform：translateX（300px）；/ transform：translateY（200px）；
表示只有一个方向的移动

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:200px;
            height:200px;
            background:palevioletred;
            -webkit-transform:translate(200px,300px);
            -moz-transform:translate(200px,300px);
            -ms-transform:translate(200px,300px);
            -o-transform:translate(200px,300px);
            transform:translate(200px,300px);
           /* -webkit-transform:translateX(100px);
            -moz-transform:translateX(100px);
            -ms-transform:translateX(100px);
            -o-transform:translateX(100px);
            transform:translateX(100px);*/
            /*-webkit-transform:translateY(200px);
            -moz-transform:translateY(200px);
            -ms-transform:translateY(200px);
            -o-transform:translateY(200px);
            transform:translateY(200px);*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：
这里写图片描述

2.rotate 旋转（顺时针为正，逆时针为负）

用法：

transform：rotate（50deg）;
表示顺时针旋转50度

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:200px;
            height:200px;
            margin:100px auto 0;
            background:chartreuse;
            -webkit-transform:rotate(30deg) ;
            -moz-transform: rotate(30deg) ;
            -ms-transform: rotate(30deg) ;
            -o-transform: rotate(30deg) ;
            transform: rotate(30deg) ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：
这里写图片描述

3.scale（x）缩放

scale没有单位，括号内的数值必须大于0
0<x<1时表示缩小；x>1时表示放大

用法：

（1）transform:scale（x,y）; x表示水平，y表示垂直

（2）transform：scaleX（0.8）；/ transform：scaleY（1.2）；
表示只有一个方向的缩放

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:200px;
            height:200px;
            background:teal;
            -webkit-transform:scale(0.5,3);
            -moz-transform:scale(0.5,3);
            -ms-transform:scale(0.5,3);
            -o-transform:scale(0.5,3);
            transform:scale(0.5,3);
           /* -webkit-transform: scaleX(2);
            -moz-transform: scaleX(2);
            -ms-transform: scaleX(2);
            -o-transform: scaleX(2);
            transform: scaleX(2);*/
            /*-webkit-transform: scaleY(0.7);
            -moz-transform: scaleY(0.7);
            -ms-transform: scaleY(0.7);
            -o-transform: scaleY(0.7);
            transform: scaleY(0.7);*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：
这里写图片描述

4.skew 倾斜、扭曲

用法：

transform：skew（30deg,20deg）;

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:200px;
            height:200px;
            background:salmon;
            margin:100px auto 0;
            -webkit-transform: skew(10deg,20deg);
            -moz-transform: skew(10deg,20deg);
            -ms-transform: skew(10deg,20deg);
            -o-transform: skew(10deg,20deg);
            transform: skew(10deg,20deg);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：
这里写图片描述

5.transform-origin 定义参考点

用法：
transform-origin：right bottom;（也可以用百分比和具体像素表示）
transform：rotate（30deg）;
表示以右下角旋转30度

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin-top:200px;
            width:200px;
            height:200px;
            background:cornflowerblue;
            transform-origin:/*right bottom*//*80% 50%*/130px 170px;
            transform:rotate(30deg);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：这里写图片描述

6.transition 过渡效果

用法：transition:transform(属性名) 1s(时间) linear(频率) 1s(延时)；

如果要将所有的效果加上过渡，可用：
transition:all 1s linear 1s；

transition:1s ;表示以1s的速度匀速变化（简写）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin-top:200px;
            width:200px;
            height:200px;
            background:darkslateblue;
            transition:transform 1s linear;
        }
        div:hover{
            transform:translate(50px) rotate(360deg);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin-top:200px;
            width:200px;
            height:200px;
            background:mediumaquamarine;
           /* transition:all 1s linear 1s;*/
            transition:1s;
        }
        div:hover{
            width:100px;
            height:100px;
            background:orangered;
            transform:translate(50px) rotate(360deg);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>