[分享]css中3d变形有哪些

CSS3中的3D变形是一项非常有趣的技术，可以让普通的网页看起来更加生动有趣。下面我们将介绍CSS中常见的3D变形效果。/ 3D变形六种方式 / .box{ width: 200px; height:...

CSS3中的3D变形是一项非常有趣的技术，可以让普通的网页看起来更加生动有趣。下面我们将介绍CSS中常见的3D变形效果。

/* 3D变形六种方式 */

.box{
  width: 200px;
  height: 200px;
  background-color: #f0f;
  transform-style: preserve-3d;
  perspective: 600px;
}

/* 方式一：平移 */

.box-translate{
  transform: translateX(100px) translateY(50px) translateZ(50px);
}

/* 方式二：缩放 */

.box-scale{
  transform: scale3d(1.5,1.5,1.5);
}

/* 方式三：旋转 */

.box-rotate{
  transform: rotateX(30deg) rotateY(50deg) rotateZ(10deg);
}

/* 方式四：斜切 */

.box-skew{
  transform: skewX(45deg) skewY(15deg);
}

/* 方式五：翻转 */

.box-flip{
  transform: rotateY(180deg);
}

/* 方式六：翻转加缩放 */

.box-flip-scale{
  transform: rotateX(180deg) scale3d(1.5,1.5,1.5);
} 

以上是六种常见的3D变形方式，对于新手来说，建议从平移、缩放和旋转入手，逐步掌握更加复杂的变形方式，以达到更佳美观的效果。