- 2D、3D转换
- 过渡
- 动画
- 多列
2D、3D转换
1.通过CSS3转换，我们能够对元素进行移动、缩放，转动，拉长或者拉伸。转换是使元素改变形状、尺寸和位置的一种效果。 可以使用2D、3D来转换元素
- 2D转换方法：
translate（）
rotate（）
scale（）
skew（）
matrix（） - 3D转换方法
rotateX（）
rotareY（）
.div2{
transform: translate(100px,100px);
-webkit-transform: translate(200px,100px);/*sarari chrome*/
-ms-transform: translate(200px,100px);/*IE*/
-o-transform: translate(200px,100px);/*opera*/
-moz-transform: translate(200px,100px);/*Firefox*/
transform: rotate(200deg);
transform: scale(1,2);/* 宽、高倍数*/
transform: skew(20deg,20deg);/* X轴、Y轴的旋转角度,用作倾斜变换*/
transform: rotateY(120deg);
}
倾斜.png
过渡
过渡.png
简单看一个鼠标放在div上的动画效果：
div{
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s ,height 2s,transform 2s;
transition-delay: 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
}
效果图：
tanstion.gif
动画
- 通过CSS3，也可以进行创建动画了
2.CSS3的动画需要遵循@keyframes规则：规定动画的时长，规定动画的名称
动画.png
动画.gif
多列
在CSS3中，可以创建多列来对文本或者区域进行布局
属性： column-count //列数
column -gap //列间距
column- rule // 列中间的线，线的形状
必须做浏览器的适配
.div2{
column-count: 3;
-moz-column-count: 3; -moz-column-gap: 30px; -moz-column-rule: 5px outset #FF0000; column-gap: 30px;
column-rule: 5px outset #FF0000;
}
多列.png
瀑布流效果
使用多列实现瀑布流效果
<div class="container">
<div>
<p>这里添加标签</p>
</div>
<div></div>
<div></div>
瀑布流截图.png
效果图
瀑布流.png
