Шаблон:Cards CSS

.wrapper { position: relative; width: 100%; height: 100%; left: 0; top: 40px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .card { width: 176px; height: 105px; position: relative; perspective: 1000px; transform-style: preserve-3d; z-index: 5; transition: 0.6s; } .front, .back { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center; transition: 0.6s; backface-visibility: hidden; } .front img { max-width: 100%; min-width: 100%; height: auto; } .back { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); } .card:hover { z-index: 10; } .card:hover .front { -webkit-transform: rotateY(0.99turn) scale(1.4); transform: rotateY(0.99turn) scale(1.4); z-index: 11; } .card:hover .back { -webkit-transform: rotateY(1.49turn) scale(1.4); transform: rotateY(1.49turn) scale(1.4); } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }