ลำดับตอนที่ #96
คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #96 : 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">
</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 ที่มีตัวนี้เป็นส่วนประกอบทำให้สวยดีกว่า
เป็นยังไงล่ะ ถูกใจมั้ยเอ่ยยย ถ้าถูกใจกดที่ภาพเพื่อไปเอาโค้ดเลยน้าาา
เก็บเข้าคอลเล็กชัน
ความคิดเห็น