<style type="text/css"><!-- body{ background: #; } p { font-family: "Edwardian Script ITC"; font-weight: 400; } .ch-grid { margin: 32px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 420px; height: 320px; font-family: "Edwardian Script ITC"; display: inline-block; margin: 18px; } .ch-item { width: 100%; height: 100%; border-radius: 10%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900px; -ms-perspective: 900px; perspective: 900px; } .ch-info { position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 10%; background-position: center center; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .ch-info .ch-info-front { background-color: #fdf4f3; box-shadow: 0 0 0 1px #cd8583, 0 0 0 9px #efb5b2; } .ch-info-front h4 { font-family: "Edwardian Script ITC"; font-weight: 400; font-size: 30px; color: #000000; text-shadow: 0 1px 0 #e8e8dd; text-align: center; text-transform: uppercase; padding-top: 30px; white-space:nowrap; } .ch-info .ch-info-back { -webkit-transform: translate3d(0, 0, -180px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -180px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -180px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -180px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -180px) rotate3d(1, 0, 0, 90deg); background-color: #ffffff; box-shadow: 0 0 0 10px rgba(232, 232, 221, 0.2), 0 0 0 3px #fff; opacity: 0; } .ch-info-back h4 { font-family: "Edwardian Script ITC"; font-weight: 400; font-size: 30px; color: #000; text-shadow: 0 1px 0 #069D80; text-align: center; text-transform: uppercase; padding: 0; margin-bottom: 0.4em; } .ch-info-back p { color: #000; margin: 0 23px 12px 23px; font-size: 25px; line-height: 14px; } .ch-info-back a { display: inline-block; background: url(https://lh6.googleusercontent.com/-PrgblczuVk8/VNzAyVWCCCI/AAAAAAABcFU/YpR2hPvj3Vk/w189-h173-no/5.png) 0 0 no-repeat; width: 20px; height: 20px; } .ch-info-back a:hover { background: url(https://lh6.googleusercontent.com/-PrgblczuVk8/VNzAyVWCCCI/AAAAAAABcFU/YpR2hPvj3Vk/w189-h173-no/5.png) 0 -25px no-repeat; } .ch-item:hover .ch-info-front { -webkit-transform: translate3d(0, 240px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 240px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 240px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 240px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 240px, 0) rotate3d(1, 0, 0, -90deg); opacity: 0; } .ch-item:hover .ch-info-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); opacity: 1; } --></style>