知识点总结

1.transform

transform 是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放， 移动，倾斜等。

值	描述
none	定义不进行转换。
translate(x,y)	定义 2D 转换。移动
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

2.transition

transition 属性设置元素当过渡效果，四个简写属性为：

transition-property 指定CSS属性的name，transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

transition-delay 定义transition效果开始的时候

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubicbezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-inout	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

body{ /* 呈现3d 效果 */    transform-style: preserve-3d;

​           /* 视图距离 */    perspective: 2000px;}

.box{  width: 300px;   height: 300px;   background-color: red;   text-align: center;

​           /* 位移 */    /* transform: translate3d(50px, 30px,10px); */

​           /* 缩放*/   /* transform: scale(1); */

​           /* 倾斜 */  /* transform: skew(30deg); */

​           transform: rotate(40deg);

​           /* 过度效果 */                  

​           transition: all 3s linear 0s;

​           margin: 120px auto;   }

​           .text{   font-weight: bold;    font-size: 120px;    line-height: 300px;    transform: rotate(-40deg);   }

​           .box:hover{    /* 旋转 */   transform: translate(500px, 30px) rotate(240deg) scale(1) ; }         

.box{   /* 居中显示 */    margin: 200px auto;     width: 300px;    position: relative;    transition: all .2s linear;               

​           /* 保留 3D 效果 */    transform-style: preserve-3d;    perspective: 800px;   }                              

.box:hover{   transform: rotateY(180deg);   }                               

.front,.back{   position: absolute;   top: 0;    left: 0;   width: 300px;   height: 300px;   border-radius: 50%;   

​                       font-size: 40px;   text-align: center;    line-height: 300px;   }                               

.front{   z-index: 1;    background-color: green;   }               

.back{   background-color: blue;   transform: rotateY(180deg);  }

li{  float: left;      margin-left: 150px;     list-style: none;     position: relative;      transition:all 3s linear;
     transform-style: preserve-3d;     text-align: center;     line-height: 40px;     border-radius: 10px;  }
li:hover{   transform: rotateX(90deg)；}

.top{   position: absolute;    width: 100px;     height: 40px;       background-color:mediumslateblue;
            border-radius: 10px;       transform: translateZ(10px);   }
.bottom{   width: 100px;     height: 40px;     background-color: #ADD8E6;
                  border-radius: 10px;      ransform: rotateX(-90deg)  translateY(10px) translateZ(20px);   }

3.动画

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animationduration	动画指定需要多少秒或毫秒完成
animation-timingfunction	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animationiteration-count	定义动画的播放次数。infinite 无限次
animationdirection	指定是否应该轮流反向播放动画。
animation-fillmode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放 时），要应用到元素的样式。
animation-playstate	指定动画是否正在运行或已暂停。

1. body{   perspective: 800px;   }                              

   .box{    /* 相对定位 */      position: relative;     width: 380px;    height: 300px;                 *

* ​     /* 居中 */        margin: 200px auto;                 *
* */* 保留3d 效果 */        transform-style: preserve-3d;       transform: rotateX(-20deg);   animation: rotatu 6s linear infinite;}*
* *.box:hover{                  /* 动画暂停 */                  animation-play-state: paused;               }               *
* *.box>div{                    /* 绝对定位 */                  position: absolute;                 top: 0;                 left: 0;                    width: 380px;                   height: 300px;                  background-image: url(img/2.jpg);                   background-size: cover;             }                   .box>div:nth-child(1){                  transform: translateZ(450px);               }                               
* .box>div:nth-child(2){                    transform: rotateY(60deg)  translateZ(450px) ;              }               
* .box>div:nth-child(3){                    transform: rotateY(120deg) translateZ(450px) ;              }                               
* .box>div:nth-child(4){                    transform: rotateY(180deg) translateZ(450px) ;              }               
* .box>div:nth-child(5){                    transform: rotateY(240deg) translateZ(450px) ;              }               
* .box>div:nth-child(6){                    transform: rotateY(300deg) translateZ(450px) ;              }                               
* @keyframes rotatu{                    
  * ​                               from{                       transform: rotateX(-20deg) rotateY(0deg);                   }               
    * ​                         to{                     transform: rotateX(-20deg) rotateY(360deg);                 }               
      * ​               }

4.浮动

.box{     border: 5px solid;    background-color: #CCCCCC;      }    

.mydiv{     width: 150px;           height: 150px;      background-color: #008000;          float: left;    }

.bottom{    width: 200px;       height: 150px;          background-color: yellow;       /* clear: both; */    }

5.清除浮动

clear 属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后 面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。

clear 可以取三个值：

值	作用
left	停止任何活动的左浮动
right	停止任何活动的右浮动
both	停止任何活动的左右浮动

心得体会

第三次课程，主要讲解了用CSS做动态网页效果。transform的一些属性应用于元素的2D或3D转换。这个属性可以将元素旋转，缩放， 移动，倾斜。transition则可以改变旋转的速度，控制运动的快慢，更好的实现了想要的效果。然后讲解了一个完整的图片旋转的3D效果，这个实践使得我对前面的知识点，概念了解的更加深刻，能够运用。最后是float浮动属性以及clear清除浮动属性，用于网页的布局。这节课对于我来说是很多新知识的获取，操作不太熟练，还需多加练习。