通过 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()转换,它什么也不是...
如果这些转换还无法满足你的需求呢?
别急,还有一种高端做法——使用matrix() 方法:
matrix() 方法把所有 2D 转换方法组合在一起。
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);
}
这样就实现了卡片翻转效果。