CSS系列（9）-- Transform 变换详解

最新推荐文章于 2025-05-27 16:38:22 发布

原创最新推荐文章于 2025-05-27 16:38:22 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

60 篇文章

订阅专栏

前端技术探索系列：CSS Transform 变换详解 🔄

致读者：探索 CSS 变换的魔力 👋

前端开发者们，

今天我们将深入探讨 CSS Transform，学习如何创建引人注目的 2D 和 3D 变换效果。

2D 变换基础 🚀

基础变换函数

/* 基础变换 */
.transform-2d {
    /* 平移 */
    transform: translate(50px, 30px);
    transform: translateX(50px);
    transform: translateY(30px);
    
    /* 缩放 */
    transform: scale(1.5);
    transform: scaleX(1.5);
    transform: scaleY(0.8);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 倾斜 */
    transform: skew(10deg, 20deg);
    transform: skewX(10deg);
    transform: skewY(20deg);
}

/* 组合变换 */
.combined-transform {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
}

/* 变换原点 */
.transform-origin {
    transform-origin: left top;
    transform: rotate(45deg);
}

实用 2D 效果

/* 悬停效果 */
.hover-card {
    transition: transform 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-10px) scale(1.05);
}

/* 翻转卡片 */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

3D 变换详解 🎯

3D 变换基础

/* 3D 变换设置 */
.transform-3d {
    /* 3D 平移 */
    transform: translate3d(x, y, z);
    transform: translateZ(50px);
    
    /* 3D 旋转 */
    transform: rotate3d(1, 1, 1, 45deg);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    
    /* 3D 视角 */
    perspective: 1000px;
    perspective-origin: center center;
}

/* 3D 空间 */
.space-3d {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

创意 3D 效果

/* 3D 翻书效果 */
.book {
    perspective: 1000px;
}

.page {
    transform-origin: left center;
    transition: transform 0.6s;
}

.page:hover {
    transform: rotateY(-180deg);
}

/* 3D 立方体 */
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

实践项目：3D 转换器 🛠️

class Transform3DGenerator {
    constructor(options = {}) {
        this.options = {
            perspective: 1000,
            rotationSpeed: 0.5,
            easing: 'ease',
            ...options
        };
        
        this.init();
    }

    init() {
        this.createStyles();
        this.setupControls();
        this.setupAnimations();
    }

    createStyles() {
        const style = document.createElement('style');
        style.textContent = this.generateStyles();
        document.head.appendChild(style);
    }

    generateStyles() {
        return `
            .transform-container {
                perspective: ${this.options.perspective}px;
                perspective-origin: 50% 50%;
            }

            .transform-element {
                transform-style: preserve-3d;
                transition: transform ${this.options.rotationSpeed}s ${this.options.easing};
            }

            .transform-face {
                position: absolute;
                backface-visibility: hidden;
            }

            ${this.generateAnimationStyles()}
        `;
    }

    generateAnimationStyles() {
        return `
            @keyframes rotate3d {
                from {
                    transform: rotate3d(1, 1, 1, 0deg);
                }
                to {
                    transform: rotate3d(1, 1, 1, 360deg);
                }
            }

            .rotate-animation {
                animation: rotate3d 10s infinite linear;
            }
        `;
    }

    createTransform(element, transforms) {
        const matrix = this.calculateTransformMatrix(transforms);
        element.style.transform = `matrix3d(${matrix.join(',')})`;
    }

    calculateTransformMatrix(transforms) {
        // 计算3D变换矩阵
        let matrix = [
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ];

        transforms.forEach(transform => {
            matrix = this.multiplyMatrices(matrix, this.getTransformMatrix(transform));
        });

        return matrix;
    }

    getTransformMatrix({ type, value }) {
        // 根据变换类型返回对应的变换矩阵
        switch(type) {
            case 'rotate':
                return this.getRotationMatrix(value);
            case 'translate':
                return this.getTranslationMatrix(value);
            case 'scale':
                return this.getScaleMatrix(value);
            default:
                return this.getIdentityMatrix();
        }
    }

    setupAnimations() {
        document.querySelectorAll('.transform-element').forEach(element => {
            element.addEventListener('mouseover', () => {
                this.startAnimation(element);
            });

            element.addEventListener('mouseout', () => {
                this.stopAnimation(element);
            });
        });
    }

    startAnimation(element) {
        const animation = element.dataset.animation;
        if (animation) {
            element.style.animation = animation;
        }
    }

    stopAnimation(element) {
        element.style.animation = 'none';
    }
}