html 点击翻转效果,纯CSS点击反转效果

css

body {

background: #F17563;

font-size: 50px;

color: #222;

}

label {

-webkit-perspective: 1000px;

perspective: 1000px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

display: block;

width: 300px;

height: 200px;

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

cursor: pointer;

}

.card {

position: relative;

height: 100%;

width: 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transition: all 600ms;

transition: all 600ms;

z-index: 20;

}

.card div {

position: absolute;

height: 100%;

width: 100%;

background: #FFF;

text-align: center;

line-height: 200px;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border-radius: 2px;

}

.card .back {

background: #222;

color: #FFF;

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

label:hover .card {

-webkit-transform: rotateX(20deg);

transform: rotateX(20deg);

box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);

}

input {

display: none;

}

:checked + .card {

transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

}

label:hover :checked + .card {

transform: rotateX(160deg);

-webkit-transform: rotateX(160deg);

box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2);

}