效果图

css3 对动画效果的支持,有时候总是那么让人着迷,相比于正真的动画制作css动画又显得简陋,但是有时候它表现出来的效果却又能让人感到惊艳。

有时候用简短的几行css便能表达出很好的效果。这里主要谈论tranform制作的一个3D Flip的一个效果。

(下面的样式代码使用的是sass预编译语言。)

1. 给containter添加preserve-3d

1
2
3
4
5
6
.wrapper-container{
transform-style: preserve-3d; // 让元素的子元素是位于3D空间中
//&:hover .wrapper{
//transform:$rotate;
//}
}

2. 定义多个层级

1
2
3
$translatez-1:translatez(100px);
$translatez-2:translatez(50px);
$translatez-3:translatez(30px);

3. 分别给3D元素添加transform属性

层级-1

1
2
3
4
5
6
7
8
9
10
.clash-card__image {
position: relative;
height: 230px;
margin-bottom: 35px;
border-top-left-radius: $border-radius-size;
border-top-right-radius: $border-radius-size;
img{
transform:$translatez-1; // level-1
}
}

层级-2

1
2
3
4
5
6
7
.clash-card__level {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
margin-bottom: 3px;
transform:$translatez-2; // level-2
}

层级-3

1
2
3
4
5
6
7
8
.clash-card__unit-stats--barbarian {
background: $barbarian;

.one-third {
border-right: 1px solid #BD7C2F;
transform:$translatez-3; // level-3
}
}

4. 最后

为了能看到不同层级表现出来的3D效果,我们让整个container旋转起来(这里逆时针旋转了2PI)。

1
2
3
4
5
6
.wrapper-container{
transform-style: preserve-3d;
&:hover .wrapper{
transform:$rotate;
}
}

最终的效果是:



在线的demo:codepen

其中的卡片样式来自于这里