<!-- 过渡 -->
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/* transition: all 1s; */
}
.box:hover{
width: 600px;
height: 600px;
background-color: lime;
transition: all 1s;
/*
语法： transition： all 1s； all表示任何属性发生变化时都执行 1s过渡持续时间
注:过渡写在鼠标点击状态时只在移入时执行一次，离开时不会执行
写在盒子属性内移入移出都会执行，执行了两次
过渡: 从一个状态到另外一个状态的过程
第一个值: 过渡的属性 all (所有的属性)
第二个值: 过渡的持续时间 单位是s或者ms 1s = 1000ms
第三个值: 过渡的延迟时间 单位是s或者ms 默认是0s
第四个值: 过渡的速度曲线 ease 默认值 荡秋千 linear 匀速
*/
/* 过渡的单一属性*/
/* 过渡的属性 */
transition-property: all;
/* 过渡的持续时间 */
transition-duration: 1s;
/* 过渡的延迟时间 */
transition-delay: 1s;
/* 过渡的曲线 */
transition-timing-function: ease;
}
</style>
<div class="box"></div>
<!-- 斜切 -->
<style>
.box4{
width: 200px;
height: 200px;
background-color: blue;
margin: 200px auto;
transition: all 1s;
}
/*
斜切:
1. 沿着那个轴斜切 那个轴保持不动
2. 另外一个轴朝这个轴倾斜对应的角度
*/
.box4:hover{
transform: skew(45deg,45deg);
}
</style>
<div class="box4"></div>
<!-- 2D转换之移动 -->
<style>
.box1{
width: 200px;
height: 200px;
background-color: lime;
transform: translate(500px,500px);
/* 取值：
translateX() 沿着X轴水平移动 正值向右 负值向左
translateY() 沿着Y轴垂直移动 正值向下 负值向上
translate(x,y) 同时沿着X和Y轴移动 (斜着移动)
里面既可以写像素 也可以写百分比(参照的是自身的宽高)
*/
}
</style>
<div class="box1"></div>
<!-- 2D转换之旋转 -->
<style>
.box2{
width: 200px;
height: 200px;
background-color: black;
transform: rotate(45deg);
margin: 0 auto;
}
/*
旋转: rotate() 括号里面写的是旋转的角度 deg
正值顺时针
负值逆时针
*/
</style>
<div class="box2"></div>
<!-- 2D转换之缩放 -->
<style>
.box3 {
width: 200px;
height: 200px;
background-color:yellow;
transform: scale(0.5);
}
/*
transform: scale()
取值:
scale(倍数) 括号里面只有一个值 代表整体缩放
scaleX(倍数) 水平缩放
scaleY(倍数) 垂直缩放
*/
</style>
<div class="box3"></div>
<!-- 转换原点设置 -->
<style>
.box5{
width: 200px;
height: 200px;
background-color: purple;
transform-origin: top;
transition: all 1s;
}
/*
transform-origin
控制2D转换的中心点
1. 方位名词: left right top bottom center
2. 像素: 以盒子的左上角为坐标原点 水平向右 垂直向下 构建一个坐标系
*/
.box5:hover{
transform: scale(3);
}
</style>
<div class="box5"></div>