2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。
1、语法:
transform:rotate(度数)
2、重点:
rotate里面跟度数,单位是deg比如rotate(45deg);
角度为正时,顺时针,负时,为逆时针;
默认旋转的中心点是元素的中心点;
2D转换中心点transfo-origin
1、语法:
transform-origin:x y;
2、重点:
注意后面的参数x和y用空格隔开;
xy默认转换的中心点是元素的中心点(50% 50%);
还可以给x y设置像素或者方位名词(top bottom left right center);
2D转换之缩放scale:缩放,顾名思义,可以放大和缩小。只要给元素添加上这个属性就能控制它放大还是缩小。
1、语法:
transform:scale(x,y);
2、重点:
注意其中的x和y用逗号分隔;
transform:scale(1,1):宽和高都放大一倍,相对于没有放大;
transform:scale(2,2):宽和高都放大了2倍;
transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2);
transform:scale(0.5,0.5):缩小;
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子;
============================================================================
分为两步:
-
先定义动画,
-
再使用(调用动画)
语法:
1、用keyframes定义动画
(类似定义类选择器):
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
2、元素使用动画:
div{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
//调用动画
animation-name:动画名称;
//持续时间
animation-duration:持续时间;
}
=======================================================================
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
语法:
animation:myfirst 5s linear 2s infinite alternate;
注意:
-
简写属性里面不包含animation-play-state;
-
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用;
-
想要动画走回来,而不是直接跳回来:animation-direction:alternate;
-
盒子动画结束后,停在结束位置:animation-fill-mode:forwards;
==========================================================================
代码如下(示例):
效果如下(示例):
代码如下(示例):