├── static └── images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ └── 4.png ├── README.md └── html └── index.html /static/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chokcoco/css3-3d-transform/HEAD/static/images/1.png -------------------------------------------------------------------------------- /static/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chokcoco/css3-3d-transform/HEAD/static/images/2.png -------------------------------------------------------------------------------- /static/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chokcoco/css3-3d-transform/HEAD/static/images/3.png -------------------------------------------------------------------------------- /static/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chokcoco/css3-3d-transform/HEAD/static/images/4.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css3-3d-transform 2 | 仅需关键代码50行实现一个3D类似旋转木马的图片浏览功能 3 | 4 | ##代码示意 5 | ```html 6 | 7 | 8 | 9 | 10 | Css3-3d-transform__实现图片旋转木马3D效果 11 | 12 | 64 | 65 |
66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 |
77 |
78 | 79 | 80 | 94 | 95 | ``` 96 | 97 | 98 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css3-3d-transform__实现图片旋转木马3D效果 6 | 7 | 98 | 99 |
100 |
101 |
102 | 103 | 109 | 110 | 111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | 121 | 122 | 144 | --------------------------------------------------------------------------------