CSS中的3D转换
今天学了css 3D转换,参数过多,直接给我整蒙圈了。特别来做个贴帮助记忆。
常用,容易混乱的:
/*开局重点:让子元素也保持3D属性👇 默认为flat:2D展现 *****非常重要***** */
transform-style: preserve-3d;
/* 相对自身X轴移动 */
transform: translateX();
/* 相对自身Y轴移动 */
transform: translateY();
/* 相对自身Z轴移动 */
transform: translateZ();
/* 相对自身移动三轴简写 空格隔开 */
transform: translate3d(0 0 0);
/* 视距,用px做单位,越小离“屏幕”越近,能超出屏幕 */
perspective: 500px;
/* a{ 围绕X轴转圈👇 单位使用角度 -deg */
transform: rotateX();
/* a{ 围绕Y轴转圈👇 单位使用角度 -deg */
transform: rotateY();
/* a{ 围绕Z轴转圈👇 单位使用角度 -deg */
transform: rotateZ();
/* a{ 👇同时选择XYZ轴旋转,关乎向量,比较难解释,自行摸索把 单位使用角度 -deg */
transform: rotate3d();
不常用的:咳咳,还没学,后续用到记得再来补充。