css3动画之翻转

来源:互联网 发布:公交线路数据库 编辑:程序博客网 时间:2024/05/22 02:17

demo代码如下:  注意:这个是放上去可以发生一次翻转,离开就翻转回去,下面有jq实现的翻转效果,可以来回翻转的,每点击一次就会翻转到反方向。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width: 200px;height: 200px;position: relative;}div::before,div::after {content: "";width: 200px;height: 200px;position: absolute;top: 0;left: 0;text-align: center;line-height: 200px;font-size: 50px;backface-visibility: hidden;background: red;transition: all 3s;}div::before {content: "CCCC";transform: rotateY(-180deg);}div::after {content: "BBBB";}div:hover::after {transform: rotateY(180deg);}div:hover::before {transform: rotateY(0deg);}</style></head><body><div></div></body></html>