[分享]CSS中3d变换炫酷实例

CSS中的3D变换为网页设计带来了全新的维度，可以为网站增添更多的动感和炫酷效果。在这里，我们将为您介绍几个简单实用的3D变换实例。 / 实例一 / .box { transform: transla...

CSS中的3D变换为网页设计带来了全新的维度，可以为网站增添更多的动感和炫酷效果。在这里，我们将为您介绍几个简单实用的3D变换实例。

/* 实例一 */
.box {
  transform: translateZ(50px);
}

/* 实例二 */
.box {
  transform: rotateY(45deg) rotateX(45deg);
}

/* 实例三 */
.box {
  transform: perspective(200px) rotateY(45deg);
}

/* 实例四 */
.box {
  transform: perspective(200px) rotateY(45deg) translateY(-50%);
  transform-origin: center bottom;
}

/* 实例五 */
.box {
  transform-style: preserve-3d;
}

/* 实例六 */
.box {
  transform: rotateY(180deg);
  transition: transform 1s;
} 

实例一：通过translateZ属性，将始终保持正面朝上的盒子移动Z轴方向50px，产生色彩互动效果。

实例二：通过rotateY和rotateX属性，将盒子旋转45度，产生旋转纸片效果。

实例三：通过perspective属性，实现盒子视角的设置，再通过rotateY属性，将盒子沿Y轴旋转45度，产生翻转展览效果。

实例四：在实例三的基础上，通过translateY属性，将盒子往上移动50%的高度，再通过transform-origin属性，将盒子的变换中心设置在中间下方，产生立体展览效果。

实例五：通过transform-style属性，将所有子元素的3D变换和父元素一起变换，实现复杂立体效果。

实例六：通过rotateY属性和transition属性，将盒子旋转180度，再通过过渡效果，产生正反面切换效果。