一.形变
/*1.形变参考点: 三轴交界点*/transform-origin: x轴坐标 y轴坐标;?/*2.旋转 rotate deg*/transform: rotate(720deg);?/*偏移 translate px*/transform: translateX(200px) translateY(200px);?/*缩放 scale 无单位*/transform: scale(x轴比例, y轴比例)?/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*//*形变不改变盒子布局, 只拿形变做动画*/
二.动画animation
/*1.设置动画体*/@keyframes move { ???/*起点省略采用的就是初始状态*/ ???0% {} ???33.3% { ???????margin-left: 800px; ???????/*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/ ???????margin-top: 50px; ???} ???66.6% { ???????margin-left: 500px; ???????margin-top: 300px; ???} ???/*终点需要设置*/ ???100% { ???????margin-left: 200px; ???????margin-top: 50px; ???}}?/*2.设置动画属性*//*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/.box { ???animation: move 2s 1 linear;}三.表格
<table> ???<caption>表格标题</caption> ???<thead> ???????<tr> ???????????<th>标题</th> ???????????<th>标题</th> ???????????<th>标题</th> ???????</tr> ???</thead> ???<tbody> ???????<tr> ???????????<td>单元格</td> ???????????<td>单元格</td> ???????????<td>单元格</td> ???????</tr> ???????????</tbody> ???<tfoot> ???????<tr> ???????????<td>单元格</td> ???????????<td>单元格</td> ???????????<td>单元格</td> ???????</tr> ???</tfoot></table>
table的全局属性:border="1" ?设置边框宽度cellspacing="10" 单元格间的间距cellpadding="10" 单元格的内边距rules="rows | cols | groups | all" 边框的保留格式?td的全局属性rowspan=‘2‘ 合并两行单元格colspan=‘3‘ 合并三列单元格?table的高度: 由内容和设置高度中的大值决定?table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
四.多行文本垂直居中
<div class="sup"> ???<p>第一行文本</p> ???<div>第二行文本</div></div>.sup { ???/*实现多行文本垂直居中 => ????针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/ ???display: table-cell; ???vertical-align: middle;}/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*//*.box>.sup>p+div*/
CSS-形变 动画 表格
原文地址：https://www.cnblogs.com/wanlei/p/10129196.html