Bunker 9 [ฐานหมายเลข9 ทดลองโค้ด]

ลำดับตอนที่ #96 : SPECIAL CODE

            SPECIAL CODE           

•  

  
  
  ใส่อะไรลงไปดีล่ะ?

 

 GET CODE

 

<style name="shoofly-pie" type="text/css">

.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{

 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(http://1.bp.blogspot.com/-v4PSotAbgBA/TukDupxWuHI/AAAAAAAADYw/tv3fbBVGrTo/s640/tumblr_lp63u98J6V1qhrgw5o1_500.jpg);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>

<center>

<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 />

<font color="#000000">ใส่อะไรลงไปดีล่ะ?</font></div>

</div>

</div>

</div>

</li>

</ul>

อธิบายก่อนจากนิดนึง : ไอ้ตรงที่ไฮไลท์น้ำเงินเอาไว้ให้คือเปลี่ยนรูปนะจ๊ะ :)
ใครชอบหยิบยืมเอาไปใช้ได้เลย อย่าลืมให้เครดิตนะคะ
credit: PIC. BOX ♡ img art STORE

ต่อไปก็ พบกับ id Dream ที่มีตัวนี้เป็นส่วนประกอบทำให้สวยดีกว่า


เป็นยังไงล่ะ ถูกใจมั้ยเอ่ยยย ถ้าถูกใจกดที่ภาพเพื่อไปเอาโค้ดเลยน้าาา