文单阅读

<!DOCTYPE html>
<html>
<head>

<title>纯 CSS3 3D 卡片翻转动画DEMO演示</title>

<style type="text/css">
/* Please 鉂� this if you like it! */


/*下面让多选框消失不见 */
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
/* 下面是展示的内容框  */
.pricing:checked+label,
.pricing:not(:checked)+label {
position: relative;
display: block;
text-align: center;
width: 260px;
height: 44px;
border-radius: 4px;
padding: 0;
margin: 0 auto;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
line-height: 44px;
padding: 0 25px;
padding-right: 27px;
overflow: hidden;
color: #fff;
text-align: left;
}

.pricing:checked+label:before,
.pricing:not(:checked)+label:before {
position: absolute;
content: '';
z-index: -2;
background-color: #102770;
width: 260px;
height: 200px;
display: block;
top: 0;
left: 0;
}

.pricing:checked+label:after,
.pricing:not(:checked)+label:after {
position: absolute;
content: '';
z-index: -1;
background-color: #ffeba7;
width: 128px;
height: 40px;
display: block;
top: 2px;
left: 2px;
border-radius: 2px;
transition: left 300ms linear;
}

.pricing:checked+label:after {
left: 130px;
}

.block-diff {
display: block;
mix-blend-mode: difference;
}

.card-3d-wrap {
position: relative;
width: 340px;
max-width: calc(100% - 20px);
height: 510px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 1000px;
margin-top: 90px;
}

.card-3d-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 700ms 400ms ease-out;
}

.card-front,
.card-back {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
position: absolute;
border-radius: 6px;
left: 0;
top: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .07);
}

.card-back {
transform: rotateY(180deg);
}

.pricing:checked~.card-3d-wrap .card-3d-wrapper {
transform: rotateY(180deg);
transition: transform 700ms 400ms ease-out;
}

.pricing-wrap {
position: relative;
padding-top: 160px;
width: 100%;
display: block;
z-index: 1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}



@keyframes border-transform {

0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}

28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}

42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}

56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}

70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}

84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}






</style>

</head>
<body style="background-color: black;">
<!-- partial:index.partial.html -->





<input type="checkbox" id="pricing" name="pricing" style=""/>
<label style="position: relative;top: 100px;" for="pricing"><span>kayaking<span style="position: relative;left: 48px;">camping
</span></span></label>



<div class="card-3d-wrap mx-auto" style="position: relative;left: 860px;top: 200px;">
<div>
<div>
<div style="font-size: 100px;">

码蝗网
</div>
</div>
<div>
<div style="font-size: 40px;">

duanshuiLu.com

</div>
</div>

</div>

</div>

<!-- partial -->



</body>
</html>