文章目录
五、变形
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>