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 class="card-container"> <div class="card"> <div class="card-front">Front</div> <div class="card-back">Back</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); }

Q2：3D变换不显示？

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 是创建视觉效果的强大工具。通过本文的学习，你应该能够：

1. 使用平移变换
2. 使用旋转变换
3. 使用缩放变换
4. 使用倾斜变换
5. 创建3D效果

掌握这些技巧，能够帮助你创建更加吸引人的视觉效果。