|
|
楼主 |
发表于 2022-12-29 08:19
|
显示全部楼层
本帖最后由 马黑黑 于 2022-12-29 11:27 编辑
本帖可以帮助理解 transform 变形中的 rotateX、rotateY、rotateZ 的具体运作。具体操作：
一、单轴旋转
程序启动时默认轴是X轴，改变当前旋转轴，请点击或滑动对应轴滑杆。滑杆取值范围从 -360度 ~ 360 度，图片的单轴转动实时对应于相应的滑杆值。滑杆控制可用鼠标操作，也可以用键盘左右方向键操作。
景深（perspective）值从 500px ~ 3000px 之间，可以通过滑杆改变。景深也称视距，它是元素3d效果的依托，但景深对 rotateZ 不会产生直接效果，原理与几何有关——Z轴是纵深方向的轴，自屏幕里景深最深点到观察者眼睛之间，元素与之垂直，因此在Z轴某一点上所做的 rotateZ 旋转，观察者捕捉不到因景深的实时变化而产生的在Z轴上的 rotateZ 的形态上的变化。所以，不要奇怪，当图片 rotateZ 一定角度后，改变景深看不到有什么变化。
二、多轴旋转
点选“全部”选项按钮，图片随后要做的旋转将是多轴旋转，可以通过设置各轴的值观察多轴旋转效果。
三、自动旋转
自动旋转仅基于单轴，即当前轴。点击或滑动滑杆，可更换当前轴。
自动旋转需要通过单击图片触发，图片正在自动旋转以外的任何时候，都可点击图片触发图片的自动旋转。
自动旋转对观察单轴旋转，有一定的帮助。
三、代码框触发旋转
程序界面左下角的代码框支持手动输入，输入的语句若符合CSS语法规范，图片会在输入当中实时响应。
在代码框输入代码对图片产生作用。所输入的代码不局限于 transform，可以试一下 width: 600px; 看看。
程序写的有些匆忙，错误与不足在所难免，又发现的请及时反馈，谢谢。
|
|
发表于 2022-12-29 08:18
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-12-29 11:47
