w3c
会员:各大互联网巨头
它设定了整个平台的规则,监督整个过程。
浏览器前缀
谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
过渡
transition 过渡
之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。
css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。
- transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须
- ransition-duration: 过渡的时间,单位可以是s或者ms。 必须
- transition-delay:指定过渡生效的延迟时间。
- transition-timing-function: 指定过渡的运动曲线
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
eg:
.box {
width: 200px;
height: 200px;
background-color: brown;
transition-property: all;
transition-duration: 2s;
transition-delay: 2s;
transition-timing-function: ease-in;
}
.box:hover {
width: 800px;
background-color: burlywood;
}
过渡属性 完成时间 运动曲线 延迟时间
transition:all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡,比如:width,height
缩放,位移,旋转,倾斜
transform 属性
缩放 scale
放大缩小
格式:
- transform:scale(x,y);
- x:代表水平方向的缩放倍数
- y:代表垂直方向的缩放倍数。
- 如果只写一个值,代表等比例缩放。
- 不会改变真实宽高,也不会旁边的盒子造成影响
位移 translate
格式:
tramsform:translate(水平位移,垂直位移)
属性值:
- px 正值:向右或向下。
- 百分比 是按照盒子本身的宽高。
只写一个值时,是水平位移。
旋转 rotate
格式: transform:rotate(角度)
单位:deg
倾斜 skew
格式:transform:skew(水平倾斜角度,垂直倾斜角度)
单位是deg,正值 顺时针,负值逆时针。
.box{
width: 600px;
height: 600px;
transform: skew(45deg,0deg);
}
3D旋转
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,deg表示旋转的角度
.box {
transform: rotate3D(1,1,1,180deg);
}
- rorateX,X轴旋转
- rorateY,Y轴旋转
- rorateZ, Z轴旋转
.box:hover {
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
}
旋转的方向:左手法则
**左手法则:**左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
3D位移
transform: translate3d(x,y,z);
.box:hover{
transform: translate3d(100px,100px,0px);
}
- transform: translateX(); //沿着x轴移动
- transform: translateY();//沿着Y轴移动
- transform: translateZ();//沿着Z轴移动
.box {
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
透视
透视:
- 设置给变换盒子的父容器。
- 设置用户眼睛与屏幕的距离。
- 透视效果只是视觉上的呈现,不是真正的距离。
body {
perspective: 200px;
}
perspective 透视:
- translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。
- translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。
- translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。