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

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

要实现这些转换,只要使用两个属性:transformtransform-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

展开阅读全文

没有更多推荐了,返回首页