<! DOCTYPE html>{margin:0;padding:0;/*font-family: Microsoft ya black;*/}Body{Background-color:Black;Perspective:800px; }@keyframes Go{0%{Transform:Rotatex (45deg); }50%{Transform:Rotatex ( -45deg); }100%{Transform:Rotatex (45deg); }}. Box{width:1000px;Height:350px;/*Background-color:green;*/margin:165px Auto;Border:5px Solid #666;Border-radius:20px;Animation:Go 5s infinite linear; }. Box:hover{animation-play-state:paused; }. Box UL{Display:Flex;List-style:None;Height:350px; }. Box ul Li{width:200px;Height:300px;/*Background-color:green;*/margin:Auto;Transform-style:preserve-3d; }. Box ul li img{width:200px;Height:300px;Border:2px solid #fff;transition:1s; }. Box ul li. Text{width:200px;Height:300px;Background-color:Black;position:Absolute;Transform:Rotatey ( -90deg);Margin-top:-304px;transition:1s; }. Box ul li:hover. Text{Transform:Rotatey (0deg); }. Box ul li:hover img{Transform:Rotatey (90deg); }. Box ul li. Text H3{Color:#fff;text-align:Center;font-size:26px;Line-height:80px; }. Box ul li. Text p{Color:#fff;text-indent:2em;font-family:Microsoft Ya-Black;Line-height:30px; } </style>
CSS 3D Flip Album animation effects