How to add a 3d logo which will rotate when we hover the cursor on it

[attackon]

we’ve three codes html, CSS and JS handy but unable to implement these on Shopify website

link>

swawe.store
attaching my code as well

3D Rotating Sphere body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { position: relative; width: 400px; /* Adjust container size as needed */ height: 400px; /* Adjust container size as needed */ perspective: 1000px; /* Perspective depth for 3D effect */ } .sphere { position: absolute; top: 50%; left: 50%; width: 300px; /* Adjust as needed */ height: 300px; /* Adjust as needed */ background-image: url('[https://cdn.shopify.com/s/files/1/0604/9733/0266/files/IMG_7713.jpg?v=1718393823](https://cdn.shopify.com/s/files/1/0604/9733/0266/files/IMG_7713.jpg?v=1718393823)'); background-size: cover; background-position: center; border-radius: 50%; border: 2px solid #fff; /* Optional: add a border for better visibility */ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); /* Optional: add a shadow for depth */ cursor: move; transform-style: preserve-3d; /* Preserve 3D transformation */ transition: transform 0.2s ease-out; /* Smooth transition */ }

[BSSCommerce-HDL]

Hi @attackon ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.header__heading-logo-wrapper {
   perspective: 1000px !important;
}

.header__heading-logo-wrapper img {
    transition: transform 0.9s;
    transform-style: preserve-3d;
}

.header__heading-logo-wrapper img:hover {
    transform: rotateY(360deg)!important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[attackon]

I added the code you asked in file base.css but it isn’t working for me, can you tell me how to add a 3d geometry that moves when cursor placed on it

[attackon]

code is showing my object has been added, but the preview page isn’t

[BSSCommerce-HDL]

Hi @attackon ,

Can I send a collaborator access to your theme? Then I can check and directly add code to help your issue.

Please share your collaborator request code from the Users and permissions page.

[attackon]

this is my request code- 3523

attaching my required code too

3D Rotating Sphere body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { position: relative; width: 400px; /* Adjust container size as needed */ height: 400px; /* Adjust container size as needed */ perspective: 1000px; /* Perspective depth for 3D effect */ } .sphere { position: absolute; top: 50%; left: 50%; width: 300px; /* Adjust as needed */ height: 300px; /* Adjust as needed */ background-image: url('[https://cdn.shopify.com/s/files/1/0604/9733/0266/files/IMG_7713.jpg?v=1718393823](https://cdn.shopify.com/s/files/1/0604/9733/0266/files/IMG_7713.jpg?v=1718393823)'); background-size: cover; background-position: center; border-radius: 50%; border: 2px solid #fff; /* Optional: add a border for better visibility */ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); /* Optional: add a shadow for depth */ cursor: move; transform-style: preserve-3d; /* Preserve 3D transformation */ transition: transform 0.2s ease-out; /* Smooth transition */ }

[BSSCommerce-HDL]

Hi @attackon ,
This code for laptop:

[BSSCommerce-HDL]

Hi @attackon ,
This code for ios:

// For ios
container.addEventListener('touchstart', startDragTouch);
container.addEventListener('touchend', endDrag);
container.addEventListener('touchmove', dragTouch);

 function startDragTouch(event) {
    isDragging = true;
    previousX = event.touches[0].clientX;
    previousY = event.touches[0].clientY;
 }

 function dragTouch(event) {
    if (isDragging) {
        const deltaX = event.touches[0].clientX - previousX;
        const deltaY = event.touches[0].clientY - previousY;
        rotationY += deltaX * 0.5; // Adjust rotation speed here
        rotationX -= deltaY * 0.5; // Adjust rotation speed here

        sphere.style.transform = `translate(-50%, -50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;

        previousX = event.touches[0].clientX;
        previousY = event.touches[0].clientY;
    }
}

Hope this can help you

[attackon]

Thank you so much for the support. Much appreciated.