文章目录
五、变形
1.旋转transform
主要用于将元素进行旋转移动倾斜
transform：rotate(45deg):旋转 2d旋转 正值代表顺时针，负值代表逆时针
transform：rotateX():有关x轴的偏移
transform：rotateY():有关y轴的偏移
transform：rotateZ():有关z轴的偏移
基点确定：
配合旋转使用，设置旋转元素基点位置 圆心，默认x轴y轴为50% 也可以使用left top right bottom属性名或者百分比来进行基点的选取与调度
transform-origin：right bottom；
2.平移transform:translate(x,y) rotate();
第一个参数是x，第二个参数是y 填一个参数即为x轴的参数,中间的参数值要加逗号分开
transform只能有一个，要实现连续旋转和平移只能有一个
3.缩放transform: scale();
括号里是放大或者缩小的倍数，第一个属性就是x轴也就是缩放宽度，第二个属性y轴，缩放高度
1 是原始大小，可以小于1可以大于1，完成放大或者缩小 数字就是倍数
如果只填一个属性，等比例放大缩小
4.倾斜transform: skew(30deg,20deg);
第一个属性，即沿x轴倾斜，第二个属性沿着y轴倾斜
六、过渡transition
transition过渡属性 指的是从一个样式到另一个样式的过程
第一参数 transition-proprtty 过渡属性（要添加过渡效果的属性的名字）width height 具体样式
all 所有样式
第二个参数 transition-duration 过渡持续的时间，默认为0单位是秒
持续时间设置越少，过渡时间执行越快
持续时间越长，过渡效果执行越慢
第三个参数 transition-timing-function 过渡效果
第四个参数 transition-delay 过渡延迟的时间 触碰的时间 单位是秒 过渡的效果，会在延迟时间之后执行
<style>
.one{
width: 300px;
height: 300px;
background-color: red;
transition: all 2s linear 2s;
}
.one:hover{
width: 600px;
/*过渡不执行*/
height: 600px;
background-color: purple;
}
</style>
<body>
<div class="one"></div>
</body>
过渡的第三个参数：transition-timing-function
linear:规定以相同的速度，开始到结束;
ease：慢速开始，然后变快，然后再以慢速结束
ease-in:规定以慢速开始
ease-out：慢速结束
.list .item5{
transition-timing-function: cubic-bezier(0.07,0.61,0,1);
/*自定义过渡效果
贝塞尔曲线
值最大为1，不宜超出*/
}
<br>
结尾：
上一篇：<a href="https://blog.csdn.net/liqiannan8023/article/details/125303434">【HTML09】css3新增的内容</a>
下一篇：<a href="https://blog.csdn.net/liqiannan8023/article/details/125303459">【HTML11】css3新增的内容3</a>
4544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
