1.变形-旋转rotate()
<div class="wrapper"> <div><span>我不想旋转</span></div> </div>
.wrapper span { display:block; //特别注意,使用这个属性时需要把非块元素转化为块元素 -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg); }
2.变形-扭曲skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。
div{ -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg); transform:skew(-45deg); }
3.变形-缩放scale()
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况:
I、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。例如:
div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); }
II、scaleX(x)元素仅水平方向缩放(X轴缩放)
div:hover { -webkit-transform: scaleX(1.5); -moz-transform:scaleX(1.5) transform: scaleX(1.5); }
III、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
4、变形-位移 translate()
translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。
<div class="wrapper"> 我不知道我的宽度和高是多少,我要实现水平垂直居中 </div>
.wrapper { padding: 20px; background:orange; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
5.定位圆点 transform-origin
在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。transform-origin取值和元素设置背景中的background-position取值类似:
示例展示:
通过transform-origin改变元素原点到左上角,然后进行顺时旋转45度。
<div class="wrapper"> <div>圆点定位在左上角</div> </div>
.wrapper div { background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; transform-origin: left top; }
6.动画transition
div{
100px;
-webkit-transition: all .5s ease-in .18s; // 表示所有属性在0.18s后触发动画,以ease-in的速度曲线,历时0.5秒
}
div:hover{
200px;
}
7.动画 animation 与 关键帧 keyframes 的使用:
.box{ -webkit-animation: 1s animate_box ease infinite; //表示动画持续时间为1s,动画名字是animate_box,变化曲线,infinite表示无限循环播放,控制动画播放次数,也可以换成其他数字,不写的话相对于1,只播放一次 } //规定动画各个阶段的状态和动画名字 @-webkit-keyframes animate_box{ 0%{background-position: 0 0;}
50%{background-position: -243px 0;}
100%{background-position: -486px 0;}
}
还有另外一种效果 ,steps( )的用法
.box.animate{ -webkit-animation: 1s animate_box steps(2) infinite; //steps(2)表示每个关键帧分两步播放,比如0%到50%这段动画中再分两步播放 }
@-webkit-keyframes animate_box{
0%{background-position: 0 0;}
50%{background-position: -243px 0;}
100%{background-position: -486px 0;}
}
8.动画 animation 与transiton的区别是:I、transiton 单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,没法再网页加载时自动发生,他可触发的方式有: :hoever :focus :checked 媒体查询触发 ,js触发
transition的发生是一次性的,不能重复发生,除非再次触发。只能定义开始和结束状态,不能定义中间状态。一条transition规则只能定义一个属性的变化,不能涉及多个属性。
而 animation 可以在没有触发事件的情况下随时间变化改变属性,而且还可以重复,可以定义很多状态,从而达到动画效果。
9、让动画最终的状态停止在自定义的状态而非原始状态的方法:
//把属性分开写是这样
-webkit-animation-fill-mode: forwards;
-webkit-animation: 1s animate_box ease forwards;
//把属性合起来写是这样
10、设置动画的播放状态
<div><span></span></div>
div span{ animation-play-state:running; //本来是播放状态 } div span:hover{ animation-play-state:paused; //鼠标悬浮是停止状态 }