位移 / 缩放 / 旋转 / 倾斜

最新推荐文章于 2022-08-02 17:40:03 发布

小鱼干.

最新推荐文章于 2022-08-02 17:40:03 发布

阅读量530

点赞数

分类专栏： CSS随手记文章标签：位移 / 缩放 / 旋转 / 倾斜

本文链接：https://blog.csdn.net/weixin_40326100/article/details/88729116

版权

CSS随手记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

位移：

改变元素在页面的位置，大小，角度以及形状的一种方式

2D转换：只在 X 轴和 Y 轴上发生转换效果

3D转换：增加了 Z 轴的转换效果

转换属性

1：转换属性

属性：transform

取值：none: 默认值，无任何转换

transform-function : 表示1个或者多个转换函数，如果是多个转换函数的话，中间用空格隔开

例如：

 transform: rotate(-45deg)   translate(50px, 50px)
 /*元素逆时针 旋转 -45 度, 并且在 x 轴位移50px Y 轴 50px*/
/*中间用空格隔开，一个transform属性兼容多个取值时，一定要用空格，而不能用分号*/

2：转换原点

属性：transform - origin

取值：数值/百分比/关键字

2个值：表示原点在 X 轴和 Y 轴上的位置

3个值：表示原点在 X 轴，Y 轴和 Z 轴上的位置

默认原点在元素的中心位置

transform-origin: 50% 50%
/*默认原点在元素的中心位置*/

3：2D转换

位移：改变元素在页面中的位置

属性：transform

取值：1：translate (x)

指定元素在 x 轴上的位移距离，取值为正，元素右移，取值为负，元素左移

2：translate (x, y)

指定元素在的 x 轴和 Y 轴的位置

取值为正，元素右移，取值为负，元素左移

  #d1, #d2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top:0px;
            left:0px;
        }
        #d2{
            background-color: skyblue;
            transform: translate(50px, 50px); /*向右移动 50px, 向下移动50px*/
            opacity: 0.5; /*设置透明度，方便辨识*/
        }
    </style>
</head>
<body>
    <div id = "d1">参考元素</div>
    <div id = "d2">位移元素</div>

2：缩放（放大或缩小）

属性： transform

取值：1：scale (值)

横向或者纵向的缩放比例，默认值为1

值大于1的时候是放大

值小于1的时候是缩小

负数：放大（水平和垂直都翻转180度）

2：scale (x， y)

x：表示横向的缩放比例

y：表示纵向的缩放比例

3：单向缩放函数

scale (x)；

scale (y)；

div{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: absolute; 
			top:0px;
			left:0px;
		}
		#d2{
			background-color: skyblue;
			opacity: 0.5;
			transform: translate(50px, 50px); /*元素位置进行位移*/
		}
		#d2:hover{
		
			transform:scale(1.5);  /*元素放大1.5倍*/

		}

4：旋转

rotate (值 deg)

取值为正，顺时针旋转，取值为负，逆时针旋转

     transform:rotate(45deg); /*元素 顺时针 旋转 45度*/

多个 transform 属性一起写时，要用空格空开才生效

 #d2:hover{
    transform: rotate(-45deg)
    translate(50px, 50px)     /*元素逆时针 旋转 -45 度, 并且在 x 轴位移50px Y 轴 50px*/
    }

5：倾斜

改变元素在页面中的形状

语法： transform

取值：1：skewX (x deg)

让元素向着 x 轴产生倾斜，实际改变的是 y 轴的倾斜角度

x 取正值， y轴逆时针倾斜

x 取负值， y轴顺时针倾斜

2：skewY (y deg)

让元素向着 Y 轴产生倾斜，实际改变的是 X 轴的倾斜角度

Y 取正值， X轴逆时针倾斜

Y 取负值， X轴顺时针倾斜

3：skew (x deg) 等同于 skewX（deg）

4：skew (x deg, y deg)

 <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: skyblue;


        }
        #d1:hover{
            transform: translate(100px, 100px)    
            rotate(135deg) skewX(45deg) scale(1.5);
            /*向下移动200px, 向右200px 逆时针旋转135度， 逆时针倾斜45度， 放大1.5倍*/
        }
    </style>
</head>
<body>
    <div id = "d1">转换效果</div>