transform属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top: 10px;
            /* 过渡效果 */
            transition: transform 2s;
        }
        div:first-of-type:active{
            /* 使用transform实现元素的移动
             1.如果只有一个参数就代表x方向
             2.如果有两个参数就代表x/y方向*/
            /* transform: translate(0px,500px); */
            
            /* 添加水平或垂直方向的移动 */
            /* transform: translateX(200px); */
            transform: translateY(200px);
        }
        
        /* scale:缩放 */
        div:nth-of-type(2):active{
            /* 实现缩放  1不缩放，>1.01放大  <0.99缩小  参照元素几何中心放大
             1.如果只有一个参数，x/y实现相等缩放
             2.如果两个参数，代表x/y方向*/
             /* transform: scaleX(2);
             transform: scaleY(2); */
             transform: scale(1,0.2);
        }
        /* rotate:旋转 */
        div:nth-of-type(3):active{
            /* 设置旋转轴心
             1.x/y
             2.关键字：left top right bottom center*/
             transform-origin: left top;
             background-color: pink;
        }
        div:nth-of-type(3):active{
            transform: rotate(360deg);
        }
        /* skew：斜切 */
        div:nth-of-type(4):active{
            background-color: blue;
            /* transform: skew(30deg); */
            transform: skew(30deg,-30deg);
        }
    </style>
</body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</html>

transform-origin
transform旋转默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点。该属性必须与 transform属性一同使用。

语法为：

 

transform-stype
规定如何在 3D 空间中呈现被嵌套的元素。该属性必须与 transform属性一同使用。
Firefox 支持 transform-style 属性。Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
语法为：

 

posted @ 2021-12-09 11:01  谁有大饼  阅读(115)  评论(0)    收藏  举报