<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> .center-bg { position: relative; top: 100px; left: 300px; width: 500px; height: 500px; background-color: #ddd; border: 1px solid #fff; } .left-corner { position: absolute; left: 0; top: calc(100% - 100px); width: 0; height: 0; border-bottom: 100px solid #999; border-right: 100px solid transparent; transform: rotate3d(1,1,0,0deg); } .right-corner { position: absolute; top: calc(100% - 100px); left: calc(100% - 100px); width: 0; height: 0; border-bottom: 100px solid #999; border-left: 100px solid transparent; } @keyframes flipBook1 { 0% { transform: rotate3d(1,1,0,0deg); } 100% { transform: rotate3d(1,1,0,90deg); } } .flip-animation-1 { animation: flipBook1 2s forwards; -moz-animation: flipBook1 2s forwards; /* Firefox */ -webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */ -o-animation: flipBook1 2s forwards; /* Opera */ } </style> </head> <body> <div class="center-bg"> <div class="content-area"> <div> <div class="left-corner flip-animation-1"> </div> </div> <div> <div class="right-corner"> </div> </div> </div> </div> </body> </html>
