Hiệu ứng CSS lật hình xem nội dung

  Bài viết hay nhất1
HTML:

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>WaZANG!</h3>
<p>by jwebcat <a href="#">Feed ME</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>



CSS:


@import "compass/css3";

.ch-grid {
margin: 20px 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: 320px;
height: 320px !important;
display: inline-block;
margin: 20px;
}

.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
}

.ch-info-wrap,
.ch-info {
position: absolute;
width: 280px;
height: 280px !important;
border-radius: 50%;
transition: all 0.4s ease-in-out;
}

.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 23, 0.Cool;
perspective: 800px;
}

.ch-info {
transform-style: preserve-3d;
}

.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-front {
transform-origin: 50% 100%;
z-index: 100;
box-shadow: inset 2px 1px 4px rgba(0, 0, 0, 0.1);
}

.ch-info .ch-info-back {
background: rgba(230, 132, 107, 0);
}

.ch-img-1 {
background-image: url(http://placekitten.com/320/320);
}

.ch-img-2 {
background-image: url(../images/17.jpg);
}

.ch-img-3 {
background-image: url(../images/18.jpg);
}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3em;
height: 50px !important;
margin: 40px 25px 10px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ch-info p {
color: #fff;
padding: 20px 5px;
font-style: italic;
margin: 0 30px;
font-size: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 21px;
letter-spacing: 1px;
padding-top: 20px;
font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
color: rgba(255, 242, 34, 0.Cool;
}

.ch-info p:hover {
color: rgba(38, 155, 200, 1);
}

.ch-info h3:hover {
color: rgba(38, 155, 200, 1);
}

.ch-item:hover .ch-info-front {
transform: rotate3d(1, 0, 0, -180deg);
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.ch-item:hover .ch-info-back {
background: rgba(230, 132, 107, 0.6);
}

Bạn không có quyền trả lời bài viết