การแปลง 3D และแอนิเมชั่น ภาพหมุน Logo หมุนรอบตัวเอง

7
ต.ค.
    2021-10-07 10:43:03   
    13
      siamweb2u
@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
  }
}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
}

#spinner {
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  -webkit-transform-style: preserve-3d;
}
#spinner:hover {
  -webkit-animation-play-state: paused;
}

#spinner img {
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}


<div id="stage" style="background: rgba(0,0,0,0.5);"> <p id="spinner" style="background: rgba(0,0,0,0.5); text-align: center; color: #fff;">Stop, I'm getting dizzy!</p> </div>

https://www.the-art-of-web.com/css/3d-transforms/

บทความล่าสุด

14
ต.ค.
คู่มือการสมัคร และติดตั้ง Google Analytics
1. ไปยังเว็บไซต์ http://www.google.com/analytics เพื่อสมัครใช้งาน Google Analyti..
                                                                                                                                                                  
9
ต.ค.
วิธีนำ Google Map มาติดตั้งบนบนเว็บไซต์
มาเริ่มขั้นตอนการติดตั้ง Google Map บนบนเว็บไซต์ไปพร้อมๆกันเลย โดยในที่นี้จะเริ่มด้วยการใช้ Google M..
                                                                                                                                                                  
7
ต.ค.
การแปลง 3D และแอนิเมชั่น ภาพหมุน Logo หมุนรอบตัวเอง
@-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -w..
                                                                                                                                                                  
25
ก.ย.
Youtube ไม่ขึ้นภาพตัวอย่าง Thumbnail ทำไงครูเอ็กซ์ แนะนำ
Youtube ไม่ขึ้นภาพตัวอย่าง Thumbnail ทำไงครูเอ็กซ์ แนะนำ เข้าไปที่ลิ้งค์ >>> ht..
                                                                                                                                                                  
23
ก.ย.
โค้ดสำหรับป้องกันการคลิกขวา และห้ามคลุมดำ บนเว็บไซต์ คัดลอกโค้ดไปใช้ได้เลยครับ
โค้ดสำหรับป้องกันการคลิกขวา และห้ามคลุมดำ บนเว็บไซต์ คัดลอกโค้ดไปใช้ได้เลยครับ วิธีวางโค้ด ไปที่&g..