一. 2 D转换
转换是C3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放 、倾斜
1、位移
语法:transfrom:translate(x,y);
简单的代码实例如下:这里我们把背景色设置成了骚粉哈哈!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通过style来设置盒子的CSS样式 */
.box{
width: 200px;
height: 200px;
background: hotpink;
/* 此行代码就是让盒子发生位移的 */
transform: translate(50px,50px);
/* 负值也是可以的 */
/* transform: translate(-50px,-50px); */
}
</style>
</head>
<body>
<!-- 定义一个盒子-->
<div class="box">
</div>
</body>
</html>
下面对位移做一下总结:
-
translate最多设置2个值,第一个值是水平,第二个值是垂直。
-
translate偏移的位置,参照的是自身原有的位置。
-
translate若设置负值时,会实现逆方向移动。
-
若设置一个值时,只有水平方向有效。
-
可以设置百分比,百分比参照的是自身的大小。
2、旋转
语法:transfrom:rotate(number deg);
这里就将代码简化一下了:
.box {
width: 200px;
height: 200px;
background: hotpink;
margin:100px auto;
/* 旋转 */
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
/* 逆时针旋转45度 */
/* transform: rotate(-45deg); */
}
总结一下:
-
单位:deg
-
正值:顺时针旋转
-
负值:逆时针旋转
-
旋转源点的设置:transform-origin:(水平取值:left| center| right |像素|百分比,垂直取值:top | center| bottom|像素|百分比);
3、缩放
语法:transform:scale(number,number);
代码如下:
.box {
width: 100px;
height: 100px;
background:hotpink;
margin: 200px auto;
/* 缩放-放大2倍数 */
transform: scale(2)
}
关于缩放的总结:
-
最多设置2个值,第一个值表示缩放宽度,第二值表示高度
-
若设置的值大于0小于1表示缩小
-
若大于1表示放大多少倍
-
若设置一个值时,表示宽高一起缩放多少倍。
4、倾斜
语法:transform:skew(number deg,number deg);
大概的代码如下:
div {
width: 300px;
height: 200px;
background: red;
margin: 100px auto;
transform: skew(45deg,0deg);
}
稍微总结一下:
-
值1表示左右倾斜
-
值2表示上下倾斜
-
单位是deg,可以是负值
希望大家都能迎娶白富美,走向人生巅峰。