【css】transform

最新推荐文章于 2022-08-11 02:46:36 发布

richest_qi

最新推荐文章于 2022-08-11 02:46:36 发布

阅读量280

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107769323

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

2D转换

translateX() | translateY()

移动元素

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

.container{
    width:100px;height:100px;
    background-color:lightskyblue;
}
.content{
    width:25px;height:25px;
    background-color:#000;
    transform:translateX(100%);
}

在这里插入图片描述

rotate()

旋转元素

 <body>
    <div class="box">123</div>
</body>

div{
    margin:50px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: lightskyblue;
}
.box{
    transform: rotate(45deg);
    /*
    transform:rotate(-45deg);
    */
}

在这里插入图片描述

<body>
    <div class="box">O</div>
    <div class="box2">O</div>
</body>

body{
    margin-left: 100px;
}
div{
    margin:100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: lightskyblue;
}
.box{
    animation: spin 10s linear infinite;
}
.box2{
    text-align: left;
    animation: spin 10s linear infinite;
    transform-origin: left;
}
@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

在这里插入图片描述

skewX() | skewY()

水平拉伸 | 垂直拉伸，拉伸元素
在这里插入图片描述

scale()

缩放元素

<body>
    <div class="box"></div>
    <div class="bigger_box"></div>
</body>


.box,.bigger_box{
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    float:left;
}
.bigger_box{
    transform: scale(1.5);
}

在这里插入图片描述

3D转换

rotateX()

<body>
    <div></div>
    <div class="box"></div>
</body>

 div{
     width: 100px;
     height: 100px;
     border: 1px solid lightskyblue;
     margin: 5px;
 }
 .box{
     transform: rotateX(45deg);
 }

在这里插入图片描述

rotateY()

<body>
    <div></div>
    <div class="box"></div>
</body>

 div{
     width: 100px;
     height: 100px;
     border: 1px solid lightskyblue;
     margin: 5px;
 }
 .box{
     transform: rotateY(45deg);
 }

在这里插入图片描述

rotateZ()

<body>
    <div></div>
    <div class="box"></div>
</body>

 div{
     width: 100px;
     height: 100px;
     border: 1px solid lightskyblue;
     margin: 50px;
 }
 .box{
     transform: rotateZ(45deg);
 }

在这里插入图片描述

perspective()

<body>
    <div></div>
    <div class="box"></div>
</body>

    div{
        width: 100px;
        height: 100px;
        border: 1px solid lightskyblue;
        margin: 50px;
    }
    .box{
        transform: perspective(10px) rotateY(5deg);
    }

在这里插入图片描述

<body>
    <div></div>
    <div class="box"></div>
    <div class="box2"></div>
</body>

div{
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    margin: 20px;
}
.box{
    transform: perspective(1em) rotateX(5deg);
}
.box2{
    transform: perspective(1em) rotateX(5deg);
    transform-origin: bottom;
}

在这里插入图片描述

matrix()

矩阵变换，比如matrix(0.71, 0.71, -0.71, 0.71, 0, 0)

<body>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

div{
  margin: 50px;
  width: 10px;
  height: 10px;
  border: 2px solid lightskyblue;
}
.box2{
  border-left-width: 0;
  border-bottom-width: 0;
}
.box3{
  border-left-width: 0;
  border-bottom-width: 0;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}

在这里插入图片描述

参考文档
transform-origin

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】transform

transform 只对块级元素有效。<body> <div class="container"> <div class="content"></div> </div></body>.container{ width:100px;height:100px; background-color:lightskyblue;}.content{ width:25px;heigh
复制链接

扫一扫