14-transform样式详解

最新推荐文章于 2023-05-30 17:31:37 发布

qq_46230474

最新推荐文章于 2023-05-30 17:31:37 发布

阅读量661

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46230474/article/details/104522748

版权

14-transform样式详解

1、旋转 transform: rotate

列如：

在这里插入图片描述

scale(x/y)缩放

transform: scale(2,3);括号里面是倍数

transform: scaleX(2)

transform: scaleY(3)

缩放值：1、>1放大 2、1>x>0缩小 3/0>x>-1把元素倒置缩小 4、<-1元素倒置放大

  <style>
        div{
            width: 200px;
            height: 200px;
            background-color: brown;
            margin: 50px auto;
            /* scale(x/y)缩放 */
            /* transform: scale(2,3);括号里面是倍数 */
            /* transform: scaleX(2);
            transform: scaleY(3); */
            /* transform: scaleX(2); */
            /* 缩放值：1、>1放大  2、1>x>0缩小 3/0>x>-1把元素倒置缩小 4、<-1元素倒置放大
             */
            transform: scaleY(3);
        }
    </style>
</head>
<body>
    <!-- 驼峰命名法 前面是小写后面是大写scaleX -->
    <div></div>

运行结果·：

在这里插入图片描述

transform: translate(x,y) 位移

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translate(x,y) 位移*/
            /* transform: translate(100px,100px); */
            animation: translate 3s;
        }
        @keyframes translate{
            /* 0%===from */
            0%{
                transform: translate(0,0);
            }
            50%{
                transform: translate(400px,0);
            }
            /* 100% ===to */
            100%{
                transform: translate(0,200px);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

skew（x,y）倾斜

 <style>
        div{
            width: 400px;
            height: 400px;
        }
        .fa{
            margin: 100px auto;
            border: 1px solid palevioletred;
        }
        .son{
            background-color: powderblue;
            /* skew（x,y） 倾斜 */
            /* transform: skew(30deg); */
            /* transform: skewY(40deg); */
             transform: skew(20deg, 30deg); 
        }
    </style>
</head>
<body>
    <div class="fa"> 
        <div class="son"></div>
    </div>
</body>

运行结果·：

在这里插入图片描述
复合写法

复合写法没有规定书写顺序，但是顺序不同会导致结果不同

变化样式之变化原点transform-origin

默认值 transform-origin: 50% 50%;元素中心

transform-origin:0% 0% ; 变化原点在元素左上角

负值：变化原点在元素外面

qq_46230474

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
14-transform样式详解

14-transform样式详解1、旋转 transform: rotate列如：scale(x/y)缩放transform: scale(2,3);括号里面是倍数transform: scaleX(2)transform: scaleY(3)缩放值：1、>1放大 2、1>x>0缩小 3/0>x>-1把元素倒置缩小 ...
复制链接

扫一扫