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 {
            width: 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;
    width: 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;
}

　　

 

posted @ 2020-11-04 14:32  一只螺  阅读(1112)  评论(0)    收藏  举报