CSS3 实现 y轴旋转切换显示正反面内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>TYEST</title>
    <style type="text/css">
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
            -ms-transform: perspective(1000px);
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            border: 1px solid #ccc;
        }

        .flip-container:hover .back, .flip-container.hover .back {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        .flip-container:hover .front, .flip-container.hover .front {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        .flip-container, .front, .back {
             320px;
            height: 427px;
        }

        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -ms-transition: 0.6s;
            -moz-transition: 0.6s;
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }

        .front, .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;
            -moz-transform: rotateY(0deg);
            -o-transition: 0.6s;
            -o-transform-style: preserve-3d;
            -o-transform: rotateY(0deg);
            -ms-transition: 0.6s;
            -ms-transform-style: preserve-3d;
            -ms-transform: rotateY(0deg);
            transition: 0.6s;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            position: absolute;
            top: 0;
            left: 0;
        }

        .front {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            background: lightgreen;
            z-index: 2;
        }

        .back {
            background: lightblue;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }
    </style>
</head>
<body>
<div class="demo-wrapper">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
    </div>
</div>
</body>
</html>

效果图:

小程序实现正反面切换兼容 IOS

css样式需要替换成下面的

动态添加类名

fonthovers    -- 添加到 font view

backhovers    -- 添加到 back view

.flip-container {
    -webkit-perspective: 1000;
    perspective: 1000;
}


.flip-container, .front, .back {
    height: 652rpx;
     590rpx;
}

.flipper {
    /*-webkit-transition: 0.6s;*/
    /*transition: 0.6s;*/
    /*-webkit-transform-style: preserve-3d;*/
    /*transform-style: preserve-3d;*/
    /*position: relative;*/
}

.front, .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    /*-webkit-transform-style: preserve-3d;*/
    transition: 0.6s;
    /*transform-style: preserve-3d;*/
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background-color: white;
    border-radius: 8rpx;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.back {
    background-color: white;
    border-radius: 8rpx;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.3);
    /*background: lightblue;*/
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.backhovers {
    -webkit-transform: rotateY(0deg)!important;
    transform: rotateY(0deg)!important;
    z-index: 3;
}
.fonthovers {
    -webkit-transform: rotateY(180deg)!important;
    transform: rotateY(180deg)!important;
}

相关阅读:
每日英语：Apple's Latest iPhone Puts Focus Back on Fingerprint Security
每日英语：Stressed at Work? Reflect on the Positive
每日英语：Hold On: Reasons For Never Giving Up Your Dream
每日英语：China's New Anti-Graft Website: A Tale of Tigers, Flies and Bath Tubs
每日英语：China Overtakes U.S. in Number of Diabetes Cases
每日英语：New Reason To Get The Kids To Bed On Time
每日英语：Why Are Items Pricier in China?
每日英语：Burning Question / Does Reading In Dim Light Hurt Your Eyes?
每日英语：Genetic Manipulation Extends Life of Mice 20%
架构设计之Spring-Session分布式集群会话管理
原文地址：https://www.cnblogs.com/lymconch/p/13925817.html

CSS3 实现 y轴 旋转切换显示正反面内容

CSS3 实现 y轴旋转切换显示正反面内容