变形transform

最新推荐文章于 2024-12-05 19:41:11 发布

张飞打岳飞

最新推荐文章于 2024-12-05 19:41:11 发布

阅读量392

点赞数 5

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/oiTto/article/details/137987694

版权

介绍:CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的

变形需要注意的点:
1>变形只修改图形,不改变盒子占据的空间.

2>变形的默认参考点是图形的中心点.

     /*将图形原点改变为 0 0 即为左上角*/
   div{
        width: 200px;height: 200px;
        background-color: red;
        transform-origin:0px 0px ;
        }

↑ 将图形原点改变为 0 0 即为左上角,改变参考点可以使用关键词 left center right; top center bottom;

3>多个变行可以共同存在
transform:变形1,变形2,变形3…;
注意:变形的前后顺序会影响最终的变形效果!!!

   div{
           width: 200px;height: 200px;
           background-color: red;
           transform:rotateZ(85deg) translateY(100px);
       }

   div{
           width: 200px;height: 200px;
           background-color: red;
           transform: translateY(100px) rotateZ(85deg);
       }

值的先后顺序不同会影响最终效果;

(1)transform:
1>第一类变形 - 旋转变形 rotate();

    div{
           width: 200px;height: 200px;
           background-color:blue;
           transform:rotate(15deg) ;
       }

rotate(); 默认原点为中心点顺时针旋转
正值:顺时针;
负值:逆时针;
rotate(角度deg);

2>第二类变形 - 缩放变形 scale();

   div{
           width: 200px;height: 200px;
           background-color:green;
           transform:scale(3) ; 
       }

scale(3); 即为放大三倍;

   div{
           width: 200px;height: 200px;
           background-color:green;
           transform:scale(0.5) ; 
       }

scale(0.5); 即为缩小0.5倍;

3>第三类变形 - 平移变形 translate();

   div{
           width: 200px;height: 200px;
           background-color:green;
           transform:translate(100px) ; 
       }

即为向X轴平移100像素;
默认是X轴;
如果写百分比,这个百分比是参考自身的高度或宽度;
transform:translateY(100px) ;
这样写是向Y轴平移

4>第四类变形 - 扭曲变形 skew()

div {
 width: 80px;
 height: 80px;
 background-color: skyblue;
}

.skewed {
 transform: skew(10deg, 10deg);
 background-color: pink;
}

skew(ax)

skew(ax, ay)

ax 是一个，表示用于沿横坐标扭曲元素的角度。
ay 是一个，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。

总结:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

如有错误,欢迎指正!