css3 的转换和过渡
一、转换 transform
1.旋转:transform:rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。<br />
如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
transform:rotate(30deg);//旋转30度(平面),与沿Z轴一样
transform:rotateX(30deg);//沿X轴旋转30度
transform:rotateY(30deg);//沿Y轴旋转30度
transform:rotateZ(30deg);//沿Z轴旋转30度
transform:rotateX(30deg) rotateY(30deg) rotateZ(30deg);//沿X、Y、Z轴各旋转30度
角度取负值就是反方向;行内元素span,要设置display:block|inline-block;才能旋转;
2. 缩放:transform:scale() ,缩放 scale()函数 让元素根据中心原点对对象进行缩放。
transform:scale(1.2,0.8);//水平放大到原来的1.2倍,垂直缩小为原来的0.8倍;
transform:scaleX(1.2);//只水平缩放,
transform:rotateY(0.8);//只垂直缩放
3.位移:transform:translate()
translate()函数可以将元素向指定的方向移动,类似于position中的relative。<br />或以简单的理解为,使用translate()函数,
可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。
//位移是根据元素的原来位置,而位移,用百分比则是根据元素的宽、高 而位移
transform:translate(20px 10px); 位移,x方向位移20px,y方向位移10px;
transform:translateX(50px); x方向
transform:translateY(40px); y方向
transform:translate(50%,50%);位移,x方向位移元素宽度的50%,y方向位移元素宽度的50%;
4.变形--原点: transform-origin()
任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。也就是中心点 <br />
在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
transform-origin:left top;//原点在左上角;
transform-origin:center bottom;//原点在底边中间;
transform-origin:30% 40%;//原点在坐标为:宽的30%、高的40% 处;百分比可大于100%
transrorm-origin:25px 25px; // 原点在坐标:25px 25px 处。
//百分比与像素具体值是相对左上角(0 0)来说的
5.倾斜:transform:skew(角度) 在X 或Y方向倾斜一定角度
transform:skew(10deg,10deg);//沿着 X 和 Y 轴的2d倾斜10deg。
transform:skewX(20deg);//沿着 X 轴的 2D 倾斜20。
transform:skewY(20deg)
6.transform书写规范
transform在不同浏览器内核下的书写规则:
//Mozilla内核浏览器:firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
//上面列出是不同浏览内核transform的书写规则,如果需要兼容各浏览器的话,以上写法都需要调用
二、过渡 transition
transition它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。
简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;<br />
第二,声明过渡元素最终状态样式,比如悬浮状态;<br />
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。<br />
CSS3的过渡transition属性是一个复合属性,主要包括以下几个子属性:<br />
transition-property:指定过渡或动态模拟的CSS属性<br />
transition-duration:指定完成过渡所需的时间<br />
transition-timing-function:指定过渡函数<br />
transition-delay:指定开始出现的延迟时间<br />
1.需要过渡的属性:transition-property
transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
//特别注意:当“transition-property”属性设置为all时,表示的是所有中点值的属性。也就是懒得写width、color之类,直接写个all
div{
transition-property:width,background-color;//需要过渡的属性是宽度和背景颜色,(多个属性以逗号隔开);
transition-duration:0.5s;//过渡所需时间为0.5秒
transition-timing-function: ease-in; //过渡的方式(函数)是ease-in(慢速开始)
//有linear(匀速)、ease(默认,由快到慢)、ease-in(慢速开始,越来越快)、ease-out(快速开始,越来越慢)、ease-in-out(先加速、后减速)
transition-delay:0.5s; // 延迟时间,延迟0.5秒再执行
}
div:hover{width:500px;background-color:orange;} //hover执行过渡,宽度由原来过渡到500px,背景色由原来过渡到橙黄色
复合写法:
transition:width 0.5s ease 0s; //其中运动方式ease可不写(采用默认);延迟时间可不写(默认无延迟);
transition:all 0.5s 0.2s; //当有两个时间时,第一个表示过渡的时间,第二个是延迟的时间,
//all可代替所有属性,当所有属性同时开始过渡,可采用此样式,
有先后顺序的多重过渡:
transition:width 0.5s,height 0.5s 0.5s,background-color 0.8s linear 1s;
// 表示先是宽过渡,宽过渡结束后开始高度过渡,结束后再是背景色过渡,计算后各自延迟时间
//例子
.box2 span{display:block;width:60px;height:60px;background-color:#005599;
transition:
margin-left 0.5s 0s,
margin-top 0.5s 0.5s,
background-color 0.5s 1s,
border-radius 0.5s 1.5s,
width 0.5s 2s,
height 0.5s 2s;
}
.box2:hover span{
margin-left:100px;
margin-top:50px;
background-color:orange;
border-radius:50%;
width:100px;
height:100px;
}