CSS3知识点总结

一、变换transform

1.移动 translate

（1）基本形式

        在水平和垂直方向上的移动，有以下形式

• translateX(数值+单位)  水平移动

• translateY(数值+单位)  垂直移动
• translate(X , Y)      斜着移动

（2）上机实例

.box1:hover{
            /* 水平移动100px */
            transform: translateX(100px);
            /* 垂直移动100px */
            transform: translateY(100px);
            /* 垂直水平同时移动 值用逗号隔开 */
            transform: translate(100px,100px);
        }

2.旋转 rotate

（1）基本形式

• rotateX(数值+deg)  绕x轴旋转
• rotateY(数值+deg) 绕y轴旋转
• rotateZ(数值+deg) 绕z轴旋转
• rotate(数值+deg) 绕z轴旋转

（2）上机实例

.box:hover img{
				/* 绕X轴逆时针旋转180度 */
                transform: rotateX(-180deg);
				/* 绕Y轴顺时针旋转90度 */
                transform: rotateY(90deg);
				/* 绕z轴逆时针旋转180度 */
                transform: rotateZ(-180deg);
				transform: rotate(-180deg);
			}

3. 缩放 scale

（1）基本形式

•         scaleX(数值)  水平缩放
•         scaleY(数值)  垂直缩放
•         缩放 scale(x , y)  水平垂直同时缩放

（2）上机实例

.box:hover img{
				/* 水平方向缩放为0倍 */
                transform: scaleX(0);
				/* 垂直方向缩放为原来的2倍 */
                transform: scaleY(2);
				/* 等比缩放为原来的0.5倍*/
                transform: scale(0.5); 
                /* 水平方向缩放为原来的0.5倍 垂直方向缩放为原来的1.5倍*/
				transform: scale(0.5,1.5);
			}

4.扭曲 skew 

（1） 基本形式

•      扭曲  skew(数值+deg) 
•      skewX(数值+deg)   x方向扭曲
•     skewY(数值+deg)  y方向扭曲

（2）上机实例

.box:hover img{
				/* 水平方向扭曲90度 */
                transform: skewX(90deg);
                /* 垂直方向扭曲45度 */
				transform: skewY(45deg) ;
                }

5.变换基点 transform-origin 

变换基点默认值在中心点，若需改变，即改变 transform-origin 内的x、y值即可

上机实例：

.box img{
				
				/* 变换基点在左上角 */
                transform-origin: left top;
			}

6.transform 缩写 

（1）transform的缩写形式

          transform ： translate值     rotate值    scale值    skew值

（2）上机实例

.box:hover img{
				/* 图片向下移动200px，绕z轴顺时针旋转90度 缩放为原来的0.5倍 垂直方向扭曲45度*/
				transform: translateY(200px) rotate(90deg) scale(0.5) skewY(45deg) ;
				
			}

二、动画 

 1.基本形式

（1）定义动画

/*第一种定义方式 */
@keyframes myrun{
				from{}
				to{}
			} 
/*第二种定义方式 */
@keyframes myrun{
				0%{}
				100%{}
			}

（2）使用动画

.box{
				animation: myrun 2s linear infinite alternate;
			}

2.属性值

 （1）animation-name  动画名称

（2）animation-duration  动画持续时间

（3）animation-timing-function  动画速度

• ease 默认 逐渐变慢
• linear 匀速
• ease-in  加速
• ease-out 减速
• ease-in-out先加速后减速
• cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线
• steps(数值)

（4）animation-delay  动画延迟时间

（5）animation-iteration-count  动画次数

•     默认  播放1次
•     infinite  无限次

（6） animation-direction  动画方向

•     normal  默认 正向单向播放
•     reverse  反向单向播放
•     alternate 来回播放
•     alternate-reverse  倒着来回播

3.上机实例 

.box{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background-image: radial-gradient(#fff,#000);
				/* animation-name: myrun; */
				/* animation-duration: 1s; */
				/* animation-timing-function: steps(4); */
				/* animation-timing-function: linear; */
				/* animation-delay: 1s; */
				/* animation-iteration-count: 2; 动画播放次数 */
				/*animation-iteration-count: infinite;  无限次 */
				/* animation-direction: normal; 动画方向 从开始-->结束 */
				/* animation-direction: reverse;  反向 从结束-->开始 */
				/* animation-direction: alternate;  从开始-->结束-->开始 */
				
				animation: myrun 2s linear infinite alternate;
			}