使用CSS3变换和图片构建的3D交互式家居

3d home furnishing，鼠标上下左右移动可以切换场景的远近视角。

css3, house

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3724
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

{
    class Image3D {
        constructor(img) {
            const coord = img.getAttribute("data-coord").split(",");
            this.img = img;
            this.img.parent = this;
            this.x = coord[0] * 1.0;
            this.y = -coord[1] * 1.0;
            this.z = coord[2] * 1.0;
            this.sx = (coord[3] || 1) * 1.0;
            this.sy = (coord[4] || this.sx) * 1.0;
            this.w = 0;
            this.h = 0;
            this.ab = 0;
            this.loaded = false;
            this.visible = true;
        }
        load() {
            this.w = this.img.naturalWidth * this.sx;
            this.h = this.img.naturalHeight * this.sy;
            const css = this.img.style;
            css.visibility = "visible";
            css.left = -this.w * 0.5 + "px";
            css.top = -this.h * 0.5 + "px";
            css.width = this.w + "px";
            css.height = this.h + "px";
            css.zIndex = 5000 - this.z;
            this.loaded = true;
        }
        display() {
            if (!this.loaded) {
                if (this.img.complete) {
                    this.load();
                } else return;
            }
            const x = this.x - 2 * (pointer.ex - 0.5 * screenWidth);
            const y = this.y - pointer.ez + screenHeight * 0.5;
            const z =
                this.z -
                (-1000 + 2500 / screenHeight * pointer.ey - screenHeight);
            if (z > 0) {
                this.visible = true;
                const scale = 250 / (250 + this.z * z);
                this.img.style.transform = `matrix(${scale * this.z}, 0, 0, ${scale *
					this.z}, ${screenWidth * 0.5 +
					x * scale * this.z}, ${screenHeight * 0.5 +
					y * scale * this.z -
					this.h * scale * this.z * 0.5})`;
                const a = Math.max(0, Math.min(100, z));
                if (a != this.ab) {
                    this.ab = a;
                    this.img.style.opacity = z / 100;
                }
            } else {
                if (this.visible) {
                    this.visible = false;
                    this.img.style.transform = "matrix(0,0,0,0,0,0)";
                }
            }
        }
    }
    // screen size
    const resize = () => {
        screenWidth = screen.offsetWidth;
        screenHeight = screen.offsetHeight;
    };
    // setup pointer
    const pointer = {
        init(screen) {
                this.x = screenWidth * 0.5;
                this.y = screenHeight * 0.5;
                this.z = 0;
                this.ex = this.x;
                this.ey = -10000;
                this.ez = 0;
                window.addEventListener(
                    "mousemove",
                    e => {
                        this.x = e.clientX;
                        this.y = e.clientY;
                    },
                    false
                );
                screen.addEventListener(
                    "touchmove",
                    e => {
                        e.preventDefault();
                        this.x = e.targetTouches[0].clientX;
                        this.y = e.targetTouches[0].clientY;
                    },
                    false
                );
                window.addEventListener(
                    "wheel",
                    e => {
                        this.z = -e.deltaY;
                    },
                    false
                );
                window.addEventListener("selectstart", e => e.preventDefault(), false);
            },
            ease(n) {
                this.ex += (this.x - this.ex) * n;
                this.ey += (this.y - this.ey) * n;
                this.ez += (this.z - this.ez) * n;
            }
    };
    // init pen
    const screen = document.getElementById("screen");
    const sourceImages = screen.getElementsByTagName("img");
    let screenWidth = 0,
        screenHeight = 0;
    window.addEventListener("resize", () => resize(), false);
    resize();
    pointer.init(screen);
    const images = Array.prototype.map.call(
        screen.getElementsByTagName("img"),
        img => {
            return new Image3D(img);
        }
    );
    // animation loop
    const run = () => {
        requestAnimationFrame(run);
        pointer.ease(0.1);
        for (let img of images) {
            img.display();
        }
    };
    run();
}

编译

CSS

HTML

3d home furnishing，鼠标上下左右移动可以切换场景的远近视角。

css3, house

编辑器支持Emmet

快捷键

3d home furnishing，鼠标上下左右移动可以切换场景的远近视角。

css3, house

使用CSS3变换、滤镜和背景图片构造的科幻虫洞

使用CSS3旋转变换和混合模式实现的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：