====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 | ||
css3d_旋转木马 [2021/12/21 16:00] 若愚 创建 |
css3d_旋转木马 [2021/12/21 16:03] (当前版本) 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
+ | # CSS 3D 转换 | ||
## 旋转木马 | ## 旋转木马 | ||
+ | |||
+ | ###### 目录 | ||
+ | - [介绍](CSS3D/ | ||
+ | - [透视](CSS3D/ | ||
+ | - [3D transform 函数](CSS3D/ | ||
+ | - [卡片翻转](CSS3D/ | ||
+ | - [立方体](CSS3D/ | ||
+ | - [盒子](CSS3D/ | ||
+ | - **[旋转木马](CSS3D/ | ||
+ | - [总结](CSS3D/ | ||
+ | - [返回列表](document/ | ||
+ | |||
+ | |||
在内容轮播方面,前端开发人员有无数的选择。[我可以推荐 Flickity 吗?](https:// | 在内容轮播方面,前端开发人员有无数的选择。[我可以推荐 Flickity 吗?](https:// | ||
行 187: | 行 201: | ||
</ | </ | ||
- | <script> | + | <Script> |
var carousel = document.querySelector(' | var carousel = document.querySelector(' | ||
var cellCount = 9; | var cellCount = 9; | ||
行 208: | 行 222: | ||
rotateCarousel(); | rotateCarousel(); | ||
}); | }); | ||
- | </script> | + | |
+ | </Script> | ||
``` | ``` | ||
行 336: | 行 351: | ||
</ | </ | ||
- | <script> | + | <Script> |
var carousel = document.querySelector(' | var carousel = document.querySelector(' | ||
var cells = carousel.querySelectorAll(' | var cells = carousel.querySelectorAll(' | ||
行 411: | 行 426: | ||
// set initials | // set initials | ||
onOrientationChange(); | onOrientationChange(); | ||
+ | </ | ||
- | </ | ||
``` | ``` | ||
我们不仅可以改变单元格的数量,我们甚至可以将旋转木马的方向从水平改为垂直。 | 我们不仅可以改变单元格的数量,我们甚至可以将旋转木马的方向从水平改为垂直。 |