css3的转换效果过渡效果动画效果和列

今天看了css3的相关视频，保存代码以供参考

1，转换效果

div {    width: 100px;    height: 100px;    background-color: blueviolet;}.div2 {/*移动 xy坐标*/transform: translate(100px, 100px);/*谷歌 苹果浏览器*/-webkit-transform: translate(100px, 100px);/*火狐浏览器*/-moz-transform: translate(100px, 100px);/*ie浏览器*/-ms-transform: translate(100px, 100px);/*opera浏览器*/-o-transform: translate(100px, 100px);}.div2 {/*旋转 度数 正数为顺时针旋转，负数为逆时针旋转*/transform: rotate(95deg);}.div2 {/*缩放 xy方向倍数*/transform: scale(2, 1);}.div2 {/*倾斜 xy方向度数,第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/transform: skew(10deg 10deg);-o-transform: skew(10deg 10deg);}.div2 {/*3d旋转 沿x轴 旋转*//*transform: rotatex(80deg);*//*3d旋转 沿y轴 旋转*/transform: rotatey(80deg);}

2,过渡效果

div {    width: 100px;    height: 100px;    background-color: red;    /*过度,宽度过度时间，高度过度时间，动画执行时间*/    transition: width 2s, height 3s, transform 10s;}div:hover {    width: 200px;    height: 200px;    /*旋转*/    /*transform: rotate(361deg);*/    /*过度延迟*/    transition-delay: 2s;}

3,动画效果

div {    width: 100px;    height: 100px;    background-color: blue;    position: relative;    /*动画 ,指定动画名字,时长    反方向播放:infinite alternate 5s*/    animation: anim 10s infinite alternate 5s;}/*动画效果的 具体内容*/@keyframes anim {    0% {        background-color: blue;        left: 0px;        top: 0px;    }    25% {        background-color: red;        left: 200px;        top: 5px;    }    50% {        background-color: green;        left: 220px;        top: 220px;    }    75% {        background-color: gold;        left: 100px;        top: 200px;    }    100% {        background-color: blueviolet;        left: 0px;        top: 200px;    }}

4,多列

.div1 {    /*列 count 列数*/    column-count: 3;    /*列的宽度 和count不要同时使用*/    /*column-width: 200px;*/    -moz-column-count: 3;    /*列 的间距*/    -moz-column-gap: 30px;    /*分割线 宽度，风格 颜色*/    -moz-column-rule: 5px outset red;}