CSS实现元素翻转效果

元素翻转的效果能让用户有良好的体验感。

先看看效果：

CSS实现元素翻转的效果有两种思路

1、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，两个子元素同时翻转

2、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，控制父元素翻转

//两个子元素同时翻转的思路<style>main{width: 300px;height: 500px;position: relative;perspective: 5000px;}.bg,.main{width: 100%;height: 100%;position: absolute;left: 0;left: 0;}.bg{background-color: red;animation: flip1 3s linear;animation-fill-mode: forwards;backface-visibility: hidden;}.main{background-color: aqua;transform: rotateY(180deg);animation: flip2 3s linear;animation-fill-mode: forwards;backface-visibility: hidden;}@keyframes flip1{0%{transform: rotateY(0deg);}100%{transform: rotateY(180deg);}}@keyframes flip2{0%{transform: rotateY(180deg);}100%{transform: rotateY(360deg);}}</style><main><div class="bg">1</div><div class="main">2</div></main>

//仅父元素翻转的思路<style>@keyframes flip{0%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}100%{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}}main{width: 500px;height: 500px;background-color: red;position: relative;animation: flip 3s linear;transform-style: preserve-3d;animation-fill-mode: forwards;}.bg,.main{position: absolute;left: 0;top: 0;width: 100%;height: 100%;backface-visibility: hidden;border-radius: 10px;}.bg{background-color: red;}.main{transform: rotateY(180deg);background-color: blue;}</style><main><div class="bg">1</div><div class="main">2</div></main>

翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试，免得线上环境出现兼容问题。