H5新特性 - CSS动画2D / 3D 、自定义动画 及 动画库

CSS动画2D / 3D 及动画库 自定义动画 及 动画库

一个元素只有一个transform属性；后面增加的transform属性会覆盖前面的属性
执行元素，添加过渡效果

transition:all,2s;

这里是引用

添加hover， hover中写动画效果

div{
   
	width: 100px;
    height: 100px;
	background: red;
	margin-top: 20px;
	text-align: center;
	line-height: 100px;

    /*过渡*/
    transition: all 2s;
}

div:hover{
   
   transform: rotateZ(190deg) scale(2,2);
        
}

CSS动画2D

• 旋转 单位是 度 deg

  <div style="transform: rotateZ(-30deg)">旋转</div>

• 位移 单位是 像素 px

<div style="transform: translateX(150px)">位移</div>

• 缩放
  正常比例是 1
  大于1 为放大
  小于1 为缩小
  没有单位

  <div style="transform: scale(1.5,1.5)">缩放</div>

• 倾斜 单位是 度

   <div style="transform: skewX(45deg)">倾斜X</div>
    <div style="transform: skewY(45deg)">倾斜Y</div>
    <br><br>
    <div style