产生3d翻转动画效果的是这三样式以及对应的transition配合:
.three-d:not(.active):hover .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
}
以及很关键的transform-style: preserve-3d; perspective: 200px;
.three-d:not(.active):hover .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
}
以及很关键的transform-style: preserve-3d; perspective: 200px;
2017-12-22
transition: all 3s ease-in-out .8s;(所有属性height width,持续3秒,先加速再减速变化,延迟0.8秒再执行变化,对于零可以省略)。
2017-12-17