https://github.com/coderLMN/CSS3dTimeMachine

基于 CSS3 3D 的时光机器效果演示
https://github.com/coderLMN/CSS3dTimeMachine

Last synced: 13 days ago
JSON representation

基于 CSS3 3D 的时光机器效果演示

• Host: GitHub
• URL: https://github.com/coderLMN/CSS3dTimeMachine
• Owner: coderLMN
• Created: 2014-07-01T09:15:43.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-08-17T10:13:24.000Z (about 8 years ago)
• Last Synced: 2024-08-01T16:18:41.247Z (3 months ago)
• Language: HTML
• Homepage: https://coderlmn.github.io/CSS3dTimeMachine/
• Size: 797 KB
• Stars: 48
• Watchers: 5
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
CSS3dTimeMachine

================

This is a demonstration of CSS3 3D Time Machine effect. 

This version is inspired by @joecritchley's demo: http://joecritchley.com/demos/time-machine, which only supports Chrome, and requires jQuery libraries.

In my version, browser compatibility are greatly improved. Now Chrome, Safari, Opera, Firefox, and IE(version >9) are supported.

Also it eliminated external library dependencies. To run a demo, all you need is just [index.html](https://github.com/coderLMN/CSS3dTimeMachine/blob/master/index.html).

One more good point: when users want to move to another item , instead of clicking 'previous' or 'next' botton, now they can scroll mouse or click on an item they interested, or use arrow keys to navigate through them.

That's it. One HTML file that demostrates CSS3 3D effects.

You may try it here: https://coderlmn.github.io/CSS3dTimeMachine/ .