- <html>
- <head>
- <meta charset="UTF-8">
- <title>CSS3 实现翻牌效果 </title>
- <style type="text/css">
- body,div{margin:0;padding:0;}
- .flip_wrap{
- display: inline-block;
- width:300px;
- height:220px;
- margin:50px;
- perspective:800px;/*perspective 属性定义 3D 元素距视图的距离, 以像素计. 该属性允许您改变 3D 元素查看 3D 元素的视图.*/
- -webkit-perspective:800px;
- -moz-perspective:800px;
- -ms-perspective:800px;
- -o-perspective:800px;
- box-sizing:border-box;
- }
- .flip{
- width:100%;
- height:100%;
- backface-visibility:hidden;/* 背对屏幕时隐藏 */
- -webkit-backface-visibility:hidden;
- -moz-backface-visibility:hidden;
- -ms-backface-visibility:hidden;
- -o-backface-visibility:hidden;
- transition: all 1s ease; /* 为翻牌添加过渡效果 */
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- -o-transition: all 1s ease;
- transform-style: preserve-3d; /* 子元素将保留其 3D 位置.*/
- }
- .side{
- width:100%;
- height:100%;
- position: absolute;/* 让背面和正面重叠 */
- left: 0;
- top: 0;
- font-size: 16px;
- color:#fff;
- text-align: center;
- }
- .front{
- border: 1px solid #ccc;
- font-size: 18px;
- background: pink;
- }
- .front span{
- display: block;
- margin: 40px auto 30px auto;
- width: 86px;
- height: 86px;
- background: url(//cdn.files.qdfuns.com/note/content/picture/201804/18/094725ccx5rgibbcgv978b.jpg) center center no-repeat;
- background-size: contain;
- }
- .back{
- backface-visibility:hidden;/* 背对屏幕时隐藏 */
- -webkit-backface-visibility:hidden;
- -moz-backface-visibility:hidden;
- -ms-backface-visibility:hidden;
- -o-backface-visibility:hidden;
- -webkit-transform:rotateY(180deg);
- -moz-transform:rotateY(180deg);
- -ms-transform:rotateY(180deg);
- -o-transform:rotateY(180deg);
- background: rgba(227, 222, 244, 0.14);
- padding: 0 36px;
- box-sizing:border-box;
- }
- .back span{
- display: block;
- margin: 40px 0px;
- font-size: 18px;
- color: #00c1DE
- }
- .back p{
- display: block;
- margin: 4px 0;
- }
- .flip_wrap:hover .flip{
- transform:rotateY(180deg);(180);
- -webkit-transform:rotateY(180deg);
- -moz-transform:rotateY(180deg);
- -ms-transform:rotateY(180deg);
- -o-transform:rotateY(180deg);
- }
- </style>
- </head>
- <body style="background:teal;">
- <div class="flip_wrap"><!-- 大容器 -->
- <div class="flip"><!-- 实现翻牌容器 -->
- <div class="side front"><!-- 牌正面 -->
- <span></span>
- <p > 流程定义 </p>
- </div>
- <div class="side back"><!-- 牌背面 -->
- <span > 例行操作 </span>
- <p > 涵盖日常操作, 预防性检查, 监控的自动化任务管理调度引擎.</p>
- </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/50012/083d5192c8f174f59db80c9d899239a3.html