CSS Transforms 变换完全指南

CSS Transforms 变换完全指南引言CSS transforms 允许你对元素进行旋转、缩放、倾斜和平移等变换操作。本文将深入探讨各种变换类型和高级技巧帮助你创建令人印象深刻的视觉效果。基础概念回顾变换类型translate: 平移rotate: 旋转scale: 缩放skew: 倾斜matrix: 矩阵变换基本语法.element { transform: translate(10px, 20px) rotate(10deg) scale(1.2); }高级技巧一平移变换基础平移.translate-x { transform: translateX(50px); } .translate-y { transform: translateY(30px); } .translate-xy { transform: translate(50px, 30px); }百分比平移.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }3D平移.translate-z { transform: translateZ(100px); transform-style: preserve-3d; }高级技巧二旋转变换基础旋转.rotate { transform: rotate(45deg); } .rotate-negative { transform: rotate(-30deg); }3D旋转.rotate-x { transform: rotateX(45deg); transform-style: preserve-3d; } .rotate-y { transform: rotateY(45deg); transform-style: preserve-3d; } .rotate-z { transform: rotateZ(45deg); }组合旋转.rotate-3d { transform: rotate3d(1, 1, 0, 45deg); transform-style: preserve-3d; }高级技巧三缩放变换基础缩放.scale-up { transform: scale(1.5); } .scale-down { transform: scale(0.8); } .scale-x { transform: scaleX(1.2); } .scale-y { transform: scaleY(0.8); }不等比缩放.scale-xy { transform: scale(1.2, 0.9); }高级技巧四倾斜变换基础倾斜.skew-x { transform: skewX(10deg); } .skew-y { transform: skewY(5deg); } .skew-xy { transform: skew(10deg, 5deg); }高级技巧五矩阵变换2D矩阵.matrix { transform: matrix(a, b, c, d, e, f); }3D矩阵.matrix3d { transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ); }实战案例3D卡片效果.card-container { perspective: 1000px; } .card { width: 300px; height: 200px; transform-style: preserve-3d; transition: transform 0.6s; } .card:hover { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .card-front { background: linear-gradient(135deg, #667eea, #764ba2); } .card-back { background: linear-gradient(135deg, #f093fb, #f5576c); transform: rotateY(180deg); }div classcard-container div classcard div classcard-frontFront/div div classcard-backBack/div /div /div实战案例悬停动画.button { padding: 12px 24px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; } .button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); } .button:active { transform: translateY(-1px) scale(1.02); }实战案例旋转木马.carousel { width: 400px; height: 300px; perspective: 1000px; position: relative; } .carousel-item { position: absolute; width: 200px; height: 150px; left: 50%; top: 50%; margin-left: -100px; margin-top: -75px; transform-style: preserve-3d; } .carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(150px); } .carousel-item:nth-child(2) { transform: rotateY(72deg) translateZ(150px); } .carousel-item:nth-child(3) { transform: rotateY(144deg) translateZ(150px); } .carousel-item:nth-child(4) { transform: rotateY(216deg) translateZ(150px); } .carousel-item:nth-child(5) { transform: rotateY(288deg) translateZ(150px); }实战案例翻页效果.book { width: 300px; height: 200px; position: relative; transform-style: preserve-3d; } .page { position: absolute; width: 100%; height: 100%; background: white; transform-origin: left center; transition: transform 0.6s; } .page:hover { transform: rotateY(-180deg); }常见问题与解决方案Q1变换不生效A确保元素有尺寸.element { width: 100px; height: 100px; transform: rotate(45deg); }Q23D变换不显示A添加 transform-style: preserve-3d.parent { transform-style: preserve-3d; } .child { transform: rotateY(45deg); }Q3元素位置偏移A使用 transform-origin 调整原点.element { transform-origin: center center; transform: rotate(45deg); }最佳实践1. 使用 transform-origin.element { transform-origin: top left; transform: rotate(45deg); }2. 组合变换.element { transform: translate(10px, 20px) rotate(10deg) scale(1.1); }3. 添加过渡效果.element { transition: transform 0.3s ease; } .element:hover { transform: scale(1.1); }总结CSS transforms 是创建视觉效果的强大工具。通过本文的学习你应该能够使用平移变换使用旋转变换使用缩放变换使用倾斜变换创建3D效果掌握这些技巧能够帮助你创建更加吸引人的视觉效果。