hover 时候
- DOCTYPE html>
-
-
-
Document -
- .card{
- margin: 30px auto;
- margin-top: 150px;
- width: 500px;
- height: 500px;
- perspective: 800px;
- }
- .front, .back{
- width: 100%;
- height: 100%;
- border-radius: 20px;
- position: absolute;
- backface-visibility: hidden;
- transition: all 1s cubic-bezier(0.7,0,0.3,1.5);
- background-size: contain;
- }
- .card:hover .front{
- transform: rotateY(180deg);
- }
- .card:hover .back{
- transform: rotateY(0deg);
- }
- .front{
- background: url(./1699939478452.png);
- }
- .back{
- background: url(./1699939494340.png);
- transform: rotateY(180deg);
- }
-
-
-
-
-