CSS3 转换，死磕原理，限时分享

作者：System 时间：2024年08月21日分类：所有,css3 字数：758

CSS3 转换 (transform) 是一种在 2D 或 3D 空间中改变元素位置、大小、角度等特性的方法。以下是一些使用 CSS3 转换的例子：




.rotate-30deg {
  transform: rotate(30deg);
}




.scale-2x {
  transform: scale(2, 2);
}




.translate-right-50 {
  transform: translateX(50px);
}
 
.translate-down-50 {
  transform: translateY(50px);
}




.skew-45deg {
  transform: skew(45deg);
}




.rotate-3d {
  transform: rotateX(45deg) rotateY(45deg);
}

CSS3 转换可以通过 transition 属性与用户的交互相结合，创建平滑的动画效果。例如，当鼠标悬停时旋转一个元素：




.element {
  transition: transform 0.5s ease-in-out;
}
 
.element:hover {
  transform: rotate(360deg);
}

以上代码在鼠标悬停时使得元素在半秒内平滑地旋转360度。