向元素应用 2D 或 3D 转换:none | transform-functions(自己去查吧,嘻嘻)
我就看几个我用得到的,嘻嘻。
translate3d
设置开始和结束的位置
/*设置原来的位置经过3D转换*/
-ms-transform: translate3d(40px,0,0); /* IE 9 */
-moz-transform: translate3d(40px,0,0); /* Firefox */
-webkit-transform: translate3d(40px,0,0); /* Safari 和 Chrome */
-o-transform: translate3d(40px,0,0); /* Opera */
/*如果想文字移动,可以设置文字最后停留的位置为(0,0,0)*/
scale
放大缩小
/*如果放大缩小,可以设置放大的比例*/
-ms-transform: scale(5); /* IE 9 */
-moz-transform: scale(5); /* Firefox */
-webkit-transform: scale(5); /* Safari 和 Chrome */
-o-transform: scale(5); /* Opera */
移动的时候加半透明
/*如果想背景移动的过程中加半透明,可以加before,然后加背景透明度*/
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}