CSS 的转换

最新推荐文章于 2022-05-10 22:26:37 发布

Python小子

最新推荐文章于 2022-05-10 22:26:37 发布

阅读量259

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88863204

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的转换

1、转换属性

作用：改变元素在页面中的位置，大小，角度的一种方式
转换属性：transform

取值	说明
none	默认值
一组转换函数	多个转换函数用空格隔开

转换原点属性：transform-origin

取值	说明
0px 0px	元素的左上角
100% 100%	元素的右下角
center center	元素的中心点（默认值）

关键之可取值：top / bottom / center / left / right

2、转换效果

1、位移（改变元素在页面中的位置）

用法	说明
transform：translateX（x）	x 表示水平位移距离和方向，取正值，右移，反之左移
transform：translateY（y）	y 表示垂直位移距离和方向，取正值，下移，反之上移
transform：translate（x，y）	简写，给一个值时，只水平位移

2、缩放（改变元素在页面中的尺寸）

用法	说明
transform：scaleX（x）	x 表示水平方向的缩放比例，取值为正，只缩放，取值为负，缩放且镜像
transform：scaleY（y）	y 表示垂直方向的缩放比例，取值为正，只缩放，取值为负，缩放且镜像
transform：scale（x，y）	简写，给一个值时，元素大小等比缩放

3、旋转（改变元素在页面中的角度）

用法	说明
transform：rotate（ndeg）	n 表示旋转角度，n为正，顺时针旋转，反之逆时针旋转

注意：转换原点会影响转换效果
旋转操作会连同坐标轴一起旋转，会影响旋转后的位移效果

<head>
    <style>
        #d1,#d2{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #d1{
            background-color: #00cc11;
            border: 1px solid black;
        }
        #d2{
            background-color: orangered;
            border: 1px solid black;
            opacity: 0.5;
            transform: translate(100px,50px) scale(2) rotate(90deg)  /* 位移,放大,旋转 */
        }
    </style>
</head>
<body>
    <div id="d1">参考元素</div>
    <div id="d2">转换元素</div>
</body>