CSS3转换属性（transform）2D入门——卡片翻转示例

通过 CSS3 转换，我们能够对元素进行移动（translate）、缩放（scale）、转动（rotate）、倾斜（skew）。

要实现这些转换，只要使用两个属性：transform和transform-origin。

接下来我们会使用transform属性对这个小方块进行各种转换：

div {
    width: 100px;
    height: 100px;
    background-color: rgb(191, 189, 189);
    margin: 20px;
}

首先是倾斜skew()：第一个参数代表向左倾斜角度，第二个参数代表向上倾斜角度。

/* 向左倾斜30度 */
transform: skew(30deg, 0deg);

然后试试缩放scale()：第一个参数代表宽度转换比例，第二个参数代表高度转换比例。

/* 水平压缩2倍 */
transform: scale(0.5, 1);

接下来是旋转rotate()：正数表示顺时针旋转，负数表示逆时针旋转。

/* 顺时针旋转45度 */
transform: rotate(45deg);

再看看位移translate()：第一个参数表示向右位移距离，第二个参数表示向下位移距离。

/* 向右位移10px，向下位移20px */
transform: translate(10px, 20px);

当然我们也可以把这些转换全部叠加起来：各转换之间用空格隔开即可。

/* 同时包含上述属性 */
transform: skew(30deg, 0deg) scale(0.5, 1) rotate(45deg) translate(10px, 20px);

再来介绍一个常常一起使用的属性——transform-origin，这个属性可以改变各种转换的“基点”。

/* 这是默认值 */
transform-origin: 50% 50%;

那么这个“基点”的意义是什么呢？

• 对于旋转rotate()转换，它是旋转的中心位置；
• 对于缩放scale()和倾斜skew()转换，它是压缩或拉伸中不变的那个中心点；
• 对于位移translate()转换，它什么也不是...

参考：关于transform-origin理解的一个旋转rotate()转换的例子

如果这些转换还无法满足你的需求呢？

别急，还有一种高端做法——使用matrix() 方法：

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

参考：理解CSS3 transform中的Matrix(矩阵)

用transform 2D转换实现的卡片翻转动画

首先定义卡片的正反两面：

<div class="container">
  <div class="back"></div>
  <div class="font"></div>
</div>

将它们叠在一起，让每个div的背面不可见（如果可见，则我们始终只能看见最上层的div）：

.container div {
  position: absolute;
  transition: transform 2s;
  backface-visibility: hidden;
}

让下面的卡片绕Y轴旋转180度，正面朝内：

.back {
  background-color: rgb(92, 229, 253);
  transform: rotateY(180deg);
}
.font {
  background-color: rgb(88, 76, 250);
}

监听容器的hover事件，触发后，把下面的卡片正面朝上，上面的卡片正面朝下：

.container:hover .font {
  transform: rotateY(180deg);
}
.container:hover .back {
  transform: rotateY(0deg);
}

这样就实现了卡片翻转效果。源码及预览地址：https://github.com/hellozpf/CSS3-transform