CSS transform 3D位移与旋转

发表评论
3D移动 在 2D移动 的基础上多加了一个可移动方向，即Z轴方向

该内容为 基于2D旋转知识的 扩展

  • 3D位移 translate3d(x,y,z);
  • 3D旋转 rotate3d(xyz);
  • 透视 perspective
  • 3D呈现 transfrom-style
向上转
向左转
自定义

在2D平面产生近大远小视觉立体，但是只是效果二维的

透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小

perspective 可设置透视 （译为视距）

// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近

perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。

因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d

3D演示

transform:rotateX() 使元素基于X轴上下3D旋转

/* 正值为向上旋转 负值为向下旋转 */
transform: rotateX(210deg);

transform:rotateY() 使元素基于Y轴左右3D旋转

/* 正值为向右旋转 负值为向左旋转 */
transform: rotateY(210deg);

transform:rotateZ() 使元素类似2D平面旋转

/* 正值为向右平面旋转 负值为向左平面旋转 */
transform: rotateZ(210deg);

transform:rotate3d(x,y,z,deg) 使元素沿自定义轴3D旋转

/* xyz轴决定矢量的方位 1为旋转 0为不旋转，deg为旋转的度数 */
transform: rotate3d(1,1,0,210deg);

transform-style:preserve-3d 让子元素呈现(开启)三维立体环境

// 该CSS属性默认值为 flat(不开启立体空间)，此代码需写给父级。但影响的为子盒子
// 此属性很重要。为了让子元素们呈现各种立体空间动画而必须的属性



太棒了！现在我们终于可以很直观的看到了盒子内子元素重叠时候的3D状态

/* 使被转换的子元素保留其 3D 转换 */   
transform-style:preserve-3d;

如若需要显示背面内容，需要将背面元素进行镜像翻转才能解决呈现反向问题

这是反面
这是正面

/* 设置镜像翻转 */
transform:rotateY(180deg);
/* 指定当元素背面朝向观察者时是否可见 */
backface-visibility: hidden;

如若需要呈现盒子效果，首先需要合理分析它们在3D环境中的位置

// 旋转的中心轴应该与两个盒子之间都有一半的距离；可让 紫色盒子向前自身一半(注意需要写px)；
// 下方的盒子可采用 transform: translateY(50%) rotateX(-90deg); (先向下平移，再向下旋转90°)；
// 最后旋转它们的父盒子，呈现它们各自的位置。达到3D旋转效果；

  • 吃
    无
  • 枣
    名
  • 药
    喵
  • 丸
    站
/* 让蓝盒子向下移动并旋转90° */
transform: translateY(50%) rotateX(-90deg);
/* 让紫盒子向Z轴往前 */
transform:translateZ(29px);

发表回复