खींचने योग्य ऊर्ध्वाधर आयत HTML

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

8 November 2025

CSS

*{ box-sizing: border-box; } html, body { margin: 0; padding: 0; }
:root { --sz: clamp(24px, min(4vw, 6vh) , 42px); font-size: var(--sz); --bg: #09090a; }
body { 
    background: var(--bg); 
    display: flex; flex-direction: row; gap: 1em;
    justify-content: center; align-items: center; 
    min-height: 100vh; overflow: hidden;
}
.vert { position: relative; width: 12em; height: 12em; }
.drag {
    --dvar: 0;
    --xvar: 0;
    --skew: 16;
    --line: 1px;
    --thick: 0.4rem;
    --clr: gray;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4rem;
    cursor: grab;
    color: #fff;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: all ease-out 1s;
}
.vert.loaded .drag { transform: rotateX(calc( 1deg * ( var(--skew) - ( 2 * var(--skew) * var(--dvar)) ))); }
.rect {
    position: absolute; margin: auto;
    transform-style: preserve-3d;
    left:0; right:0;
    width: 2rem; height: 100%;
    translate: 4rem;
    transform-origin: -3rem 50%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    background: hsl(from var(--bg) h s calc( l + 12) );
    background-size: cover; background-position: center;
    transition: all ease-out 2s;
}
.vert.loaded {
    .rect:nth-child(1)  { transform: rotateY( calc( 360deg * var(--dvar)) ) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(2)  { transform: rotateY( calc( 360deg * ( 1 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(3)  { transform: rotateY( calc( 360deg * ( 2 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(4)  { transform: rotateY( calc( 360deg * ( 3 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(5)  { transform: rotateY( calc( 360deg * ( 4 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(6)  { transform: rotateY( calc( 360deg * ( 5 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(7)  { transform: rotateY( calc( 360deg * ( 6 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(8)  { transform: rotateY( calc( 360deg * ( 7 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(9)  { transform: rotateY( calc( 360deg * ( 8 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(10) { transform: rotateY( calc( 360deg * ( 9 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(11) { transform: rotateY( calc( 360deg * ( 10/11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
}

.rect:nth-child(1)   { background-image: url('https://picsum.photos/id/43/300');  }
.rect:nth-child(2)   { background-image: url('https://picsum.photos/id/58/300');  }
.rect:nth-child(3)   { background-image: url('https://picsum.photos/id/61/300');  }
.rect:nth-child(4)   { background-image: url('https://picsum.photos/id/79/300');  }
.rect:nth-child(5)   { background-image: url('https://picsum.photos/id/88/300');  }
.rect:nth-child(6)   { background-image: url('https://picsum.photos/id/91/300');  }
.rect:nth-child(7)   { background-image: url('https://picsum.photos/id/115/300'); }
.rect:nth-child(8)   { background-image: url('https://picsum.photos/id/121/300'); }
.rect:nth-child(9)   { background-image: url('https://picsum.photos/id/130/300'); }
.rect:nth-child(10)  { background-image: url('https://picsum.photos/id/192/300'); }
.rect:nth-child(11)  { background-image: url('https://picsum.photos/id/209/300'); }

.rect span:nth-child(1), .rect span:nth-child(2) {
    position: absolute;
    width: var(--thick); height: 100%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 0% 50%;
    background: var(--bg);
}
.rect span:nth-child(1) { transform: rotateY(-90deg); }
.rect span:nth-child(2) { transform: rotateY(-90deg); left: 100%; }
.rect span:nth-child(3), .rect span:nth-child(4) {
    position: absolute;
    width: 100%; height: var(--thick);
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 50% 0%;
    background: var(--bg);
}
.rect span:nth-child(3) { transform: rotateX(90deg); }
.rect span:nth-child(4) { transform: rotateX(90deg); top: 100%; }
.rect span:nth-child(5) {
    position: absolute;
    width: 100%; height: 100%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 50% 50%;
    transform: translateZ( var(--thick) );
    background: hsl(from var(--bg) h s calc( l - 12) );
}

JS

const vert = document.querySelector('.vert');
const drag = document.querySelector('.drag');
let isDragging = false;
let dragValue = 0;
let clickOffsetY = 0;
let lastTop = 0;
let lastTime = performance.now();
let smoothedVelocity = 0;
const velocityStrength = 164;
const velocityEase = 0.2;
const velocityDecay = 0.1;
let lastUpdateTime = 0;
let rafId = null;
const updateInterval = 10;

document.addEventListener("DOMContentLoaded", function() { vert.classList.add('loaded'); });

drag.addEventListener('mousedown', (e) => {
    lastInteractionTime = performance.now();
    if (idleOscillating) idleOscillating = false;
    isDragging = true;
    const dragRect = drag.getBoundingClientRect();
    clickOffsetY = e.clientY - dragRect.top;
    document.body.style.userSelect = 'none';

lastTop = drag.offsetTop;
    lastTime = performance.now();
});

document.addEventListener('mousemove', (e) => {
    lastInteractionTime = performance.now();
    if (!isDragging || rafId) return;
    if (idleOscillating) idleOscillating = false;

rafId = requestAnimationFrame(() => {
        const now = performance.now();
        const deltaTime = now - lastTime;
        const vertRect = vert.getBoundingClientRect();
        let newTop = e.clientY - vertRect.top - clickOffsetY;
        const maxTop = vert.offsetHeight - drag.offsetHeight;
        newTop = Math.max(0, Math.min(newTop, maxTop));

drag.style.top = `${newTop}px`;
        dragValue = newTop / maxTop;

if (now - lastUpdateTime >= updateInterval) {
            const cleanValue = parseFloat(dragValue.toFixed(4));
            drag.style.setProperty('--dvar', cleanValue);
            lastUpdateTime = now;
        }

const deltaPos = newTop - lastTop;
        const rawVelocity = deltaTime > 0 ? deltaPos / deltaTime : 0;
        smoothedVelocity += (rawVelocity - smoothedVelocity) * velocityEase;
        const outputVelocity = Math.max(-velocityStrength, Math.min(velocityStrength, smoothedVelocity * velocityStrength));
        drag.style.setProperty('--xvar', outputVelocity.toFixed(4));
        lastTop = newTop;
        lastTime = now;
        rafId = null;
    });
});
function easeVelocityToZero() {
    if (isDragging) {
        requestAnimationFrame(easeVelocityToZero);
        return;
    }
    smoothedVelocity += (0 - smoothedVelocity) * velocityDecay;
    const outputVelocity = smoothedVelocity * velocityStrength;

drag.style.setProperty('--xvar', outputVelocity.toFixed(4));

if (Math.abs(smoothedVelocity) > 0.001) {
        requestAnimationFrame(easeVelocityToZero);
    }
}

document.addEventListener('mouseup', () => {
    lastInteractionTime = performance.now();
    if (idleOscillating) idleOscillating = false;
    isDragging = false;
    document.body.style.userSelect = '';
    easeVelocityToZero();
});

let lastInteractionTime = performance.now();
let idleOscillating = false;
let idleStartTime = 0;

खींचने योग्य ऊर्ध्वाधर आयत HTML

अनुशंसित

सरल HTML कैलकुलेटर कोड उदाहरण

मूल HTML बटन उदाहरण

HTML कोड प्लेसहोल्डर टिप्पणी

HTML

CSS

JS

अनुशंसित

सरल HTML कैलकुलेटर कोड उदाहरण

मूल HTML बटन उदाहरण

HTML कोड प्लेसहोल्डर टिप्पणी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS