นิยาย Z i c m a . C o d e & L a b e l > ลำดับตอนที่ #9 : ` โค้ด ♔ กลมซ้อนกลม ชี้แล้วพลิกตัวไม่ซึมเปื้อน : Dek-D.com

ลำดับตอนที่ #9

ลำดับตอนที่ #9 : ` โค้ด ♔ กลมซ้อนกลม ชี้แล้วพลิกตัวไม่ซึมเปื้อน

อัปเดตล่าสุด 29 พ.ค. 60

❝ Z i c m a C o d e & L a b e l ⁹
f o r. A l l . Code type
D e s i g n . 15 / 03 / 14
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

ไม่รู้มีใครแจกโค้ดนี้รึยัง แต่เท่าที่ส่องเด็กดีมาก็นานนม
ลิยังไม่เคยเห็นใครแจกเลยน้าาาา ><
ดังนั้นก็เลยมาแจกฮร้าาาา

ใส่ข้อความตรงนี้เลย
-
-
-
-
-
-

- COPY CODE -

.ch-info-wrap{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

-webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

top: 20px;
 left: 20px;
 background: #222;
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
  
 -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: 50%;
 background-position: center center;

-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
}

.ch-info .ch-info-back {
 -webkit-transform: rotate3d(0,1,0,180deg);
 -moz-transform: rotate3d(0,1,0,180deg);
 -o-transform: rotate3d(0,1,0,180deg);
 -ms-transform: rotate3d(0,1,0,180deg);
 transform: rotate3d(0,1,0,180deg);
 background: #fff;
}

.ch-img-1 { 
 background-image: url(ใส่ url รูปภาพ);background-size:500px;
}

.ch-item:hover .ch-info-wrap {
 box-shadow: 
  0 0 0 0 rgba(255,255,255,0.8), 
  inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
 -webkit-transform: rotate3d(0,1,0,-180deg);
 -moz-transform: rotate3d(0,1,0,-180deg);
 -o-transform: rotate3d(0,1,0,-180deg);
 -ms-transform: rotate3d(0,1,0,-180deg);
 transform: rotate3d(0,1,0,-180deg);
}

.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;
 display: inline-block;
 margin: 20px;
}</style>
<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">
						&nbsp;</div>
					<div class="ch-info-back">
						<br />
						<br />
						<br />
						ใส่ข้อความตรงนี้เลย<br />
						-<br />
						-<br />
						-<br />
						-<br />
						-<br />
						-<br />
						&nbsp;</div>
				</div>
			</div>
		</div>
	</li>
</ul>
<br />

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -