2020-11-20 web变形 2D转换

最新推荐文章于 2023-07-23 23:34:37 发布

Deigin

最新推荐文章于 2023-07-23 23:34:37 发布

阅读量245

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_45659634/article/details/109860403

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

web变形 2D转换

倾斜 transform:sekw(X-deg,Y-deg);
旋转 transform:rotate(deg);
缩放 transform:scale(X-deg,Y-deg);
平移 transform:translate(X-deg,Y-deg);

  代码示例1 倾斜
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜</title>
    <style>
     div{
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;
        }
        #one{
        margin: 50px;
        width: 300px;
        height: 200px;
        background-color: darkgoldenrod;
        transform:skew(45deg,40deg);        /*倾斜设置属性 倾斜角度 不能省略deg */
        -webkit-transform: skew(45deg,40deg);   //Safari and Chrome 浏览器兼容代码
        -moz-transform: skew(45deg,40deg);  //Firefox 浏览器兼容代码
        -o-transform:   skew(45deg,40deg);   //Opera  浏览器兼容代码
        -ms-transform:   skew(45deg,40deg);  //IE9 浏览器兼容代码
        } 
    </style>

</head>
<body>
    <div>我是一个div1</div>
    <div class="one">我是一div2</div>
</body>
</html>

代码示例2 旋转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <!-- <title>旋转</title> -->
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;

        }
        #one{
            margin: 10px;
            width: 300px;
            height: 200px;
            background-color: darkgoldenrod;
            transform:rotate(45deg);  /* 旋转设置 ，（）中是旋转角度 ，亦可用transform-origin：——X,Y,Z改变旋转角度*/       // 文字亦会跟着旋转
            -webkit-transform: skew(45deg,40deg);   //Safari and Chrome 浏览器兼容代码
            -moz-transform: skew(45deg,40deg);  //Firefox 浏览器兼容代码
            -o-transform:   skew(45deg,40deg);   //Opera  浏览器兼容代码
            -ms-transform:   skew(45deg,40deg);  //IE9 浏览器兼容代码
        }
        
    </style> -->
    </head>
<body>
    <div>我是一个div1</div>
    <div class="one">我是一div2</div>
</body>
</html>

代码示例3 缩放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放</title>
     <style>
         div{
             
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;


        }
        #one{
            margin: 300px;
            background-color: darkgoldenrod;
             transform: scale(-0.5,-0.5);     /*是一个缩小元素 缩小之后文字会颠倒*/
            -webkit-transform:  scale(-0.5,-0.5);
            -moz-transform:  scale(-0.5,-0.5);
            -o-transform:   scale(-0.5,-0.5);
            -ms-transform:   scale(-0.5,-0.5);

            }  
     </style>  
  
</head>
<body>
    <div>我是一个div1</div>
    <div class="one">我是一div2</div>
</body>
</html>

代码示例4 平移
<title>变形（平移）</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;

        }
        #one{
            width: 200px;
            height: 300px;
            background-color: darkgoldenrod;
            transform: translate(30px,40px); /* 平移属性，在（x，y）中，x，y是平移的方向尺度*/
            -webkit-transform: translate(30px,40px); 
            -moz-transform: translate(30px,40px);
            -o-transform: translate(30px,40px);
            -ms-transform: translate(30px,40px);
        }
    </style> -->
    </head>
<body>
    <div>我是一个div1</div>
    <div class="one">我是一div2</div>
</body>
</html>

Deigin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020-11-20 web变形 2D转换

web变形 2D转换倾斜 transform:sekw(X-deg,Y-deg);旋转 transform:rotate(deg);缩放 transform:scale(X-deg,Y-deg);平移 transform:translate(X-deg,Y-deg); 代码示例1 倾斜 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫