HTML5+CSS3-基础06-transition过渡
CSS3 过渡
transition:过渡属性 过渡时长 过渡速度 延迟时间;
transition-property:指定过渡的CSS属性。
transition-duration:指定完成过渡所需的时间。
transition-timing-function:指定过渡调速函数。
transition -delay:指定过渡开始出现的延迟时间。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
/* 全部变化属性 3s过渡时间 速度曲线linear(匀速) 延迟为0 */
transition: all 3s linear;
}
/* 鼠标悬停在div上时触发 */
div:hover{
width: 100px;
background-color:black;
transform: translate(300px, 300px) scale(2,2) rotate(200deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform属性
1. 变形-旋转 ratate()函数
通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。
如果这个值为正值,元素相对原点中心顺时针旋转;
如果这个值为负值,元素相对原点中心逆时针旋转。
transform:rotateX(30deg) 绕着X轴顺时针转32度
transform:rotateY(30deg) 绕着Y轴顺时针转32度
transform:rotateZ(30deg) 绕着Z轴顺时针转32度
可添加透视属性:perspective:500px,是旋转更直观,值越大 近大远小 效果越小,添加属性给上级元素才生效(推荐添加到父元素)
2.变形-缩放 scale() 函数
让元素根据中心原点对对象进行缩放。 scale()的取值默认的值为1,当值设置为0.01到0.99之间时,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
transform: scale(X轴倍数,Y轴倍数)
transform: scale(X轴倍数, 1)
transform: scale(1,Y轴倍数)
3.变形-位移 translate() 函数
translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。
transform: translate(X轴, Y轴);
transform: translateY(数值);
transform: translateX(数值);
transform-origin:水平方向 垂直方向;
例如:(3中表示)
transform-origin: 200px 300px;
transform-origin:center center;
transform-origin: 50% 350%
4.变形- 扭曲 skew()函数
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。
一个参数:表示水平方向的倾斜角度;
两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
内容仅供学习参考,若有错误欢迎大家指正----WUCASE