本文详细解析了如何使用CSS的transform-style:preserve-3d和transform:perspective属性创建3D效果，通过设置子元素的3D属性和视角距离，实现立体视觉效果。以立方体为例，介绍了6个div元素作为立方体的6个面，通过绝对定位使各面原点重合，调整旋转和位移顺序以达到理想的3D展示。
父元素要添加属性transform-style:preserve-3d;和transform:perspective(800px);还有相对定位 首先设置子元素 具有3D属性，然后再设置视角与3D元素的距离，拉开视角才可以看到3D效果！以像素计；；相对定位是为了给子元素绝对定位一个标点； 以立方体为例，（其实我只会立方体。。。） 子元素便是立方体的各个面了，6个div 便是6个面，然后绝对定位，脱离文档流，并使各自的原点重合，方便调整； ： ： ： ： ： ： ： ： ： : ： ： ： 此处省略一万字 重点是 按照图形最终呈现的结果去思考旋转和位移的顺序，这个很重要，旋转后 坐标轴发生变化，坐标轴的方向也跟着旋转 估计是这个只有我可以看懂了吧。。。。希望自己一年后再来看，自己还能看懂
转载于:https://www.cnblogs.com/daowangzhizhu-pt/p/5694345.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
