JavaScript and CSS Fusion - achieving a mesmerizing 3D image wrapping effect

I am currently attempting to achieve a 3D wrap effect for images on my website, similar to the one showcased in this image.

The desired effect needs to closely resemble the image linked above.

Below is the CSS code I am using to try to implement this effect:

.gallery-wrap{
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0 0px 0px 0px black !important;
    -moz-box-shadow: 0 0px 0px 0px black !important;
    box-shadow: 0 0px 0px 0px black !important;
  }
  .gallery-wrap img{
    transform: perspective(400px) rotateY(10deg) translateX(7.5%) translateY(30px);
    margin-bottom: 5em !important;
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0 5px 7px -1px black;
    -moz-box-shadow: 0 5px 7px -1px black;
    box-shadow: 0 5px 7px -1px black;
  }
  .gallery-wrap div:after{
    content: '';
    width: 5%;
    height: 96%;
    background-image: url('<url of the same image the is to be wrapped>');
    position: absolute;
    top: 0px;
    transform: perspective(250px) rotateY(-55deg) translateY(7px) translateX(-10px);
    left: 0px;
    background-size: 10% 750%;
    background-position-x: 0%;
  }

The current code works as intended, however, it does not work optimally for all images. Images with more height than width tend to cause issues with the existing code.

I am interested in finding a JavaScript algorithm or a free library that can accomplish this task effectively. The algorithm should be able to analyze the width and height of the img element and generate appropriate transform values for the code provided above.

javascriptjqueryhtmlcssimage

Answer №1

Discovered the solution. Here is the code snippet:

.gallery-wrap{
    perspective: 1000px;  //necessary for achieving the correct 3D depth
}
.gallery-wrap div:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: left; //Adjust according to different edges
    transform: rotateY(90deg); // Y axis rotation. Modify as needed.
    transform-origin: left; // Specify which side to flip
}
.gallery-wrap div {
    display: block;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("<image_link>");
    background-size: 0, cover;  
    transform-style: preserve-3d;
    transition: all 0.5s;
    margin: 10% auto; 
    width: 80%;
    transform: rotateY(37.5deg); 
    transform-origin: center; 
}

Background image should be used.

Element structure - .gallery-wrap > div

Credits: Original source - TheCodePlayer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a calendar on the supervisor's page that can only be edited by authorized users

Within my web application, there are approximately 10,000 supervisors who each have their own page. I would like to incorporate a PHP-built calendar on each supervisor's page, allowing them to manage their schedules by adding, editing, and deleting ev ...

phpjqueryajax

Ways to retrieve the checkbox value using PHP in conjunction with XML

I am currently in the process of learning PHP, XML, AJAX, and other related technologies. I have a form that is working fine for the most part, but I am facing an issue with passing the value/state of a checkbox to my PHP script. It's worth mentionin ...

javascriptphpajaxxmlforms

Utilizing CodeIgniter for Efficient AJAX Posting

I'm struggling to submit a post using the ajax post method. It appears that the request is being posted without any error messages, but the model doesn't seem to respond and insert the row into the database. While I'm not well versed in jQu ...

javascriptphpjqueryajaxcodeigniter

My function handler is not being triggered when using React's onClientClick

I'm facing an issue with a button component I have, let's refer to it as < MyButton >. <MyButton onClick={this.props.calculate} onClientClick={this.changeColor} > Calculate </MyButton> Whenever I click the button, my cal ...

javascriptreactjseventsevent-handling

Blending Buffers or another approach

How can I resize an image screenshot from the webshot module in memory without saving it to disk? Here is my current code: var webshot = require('webshot'); var fs = require('fs'); var sharp = require('sharp'); alldata ...

javascriptnode.jsexpress

Create a roulette wheel by leveraging the power of jQuery and incorporating CSS3 rotation

Currently, I am in the process of creating a mouse-controlled roulette without using canvas or SVG. Instead, I am relying solely on CSS3 rotation and some jQuery. My goal is to allow users to rotate the wheel by moving their mouse up and down while clicki ...

javascriptjquerycss

What is the significance of the statement "does it fit or are there no more floats available" in the W3C specifications for floating elements?

.container { width: 500px; } .box1 { display: inline-block; width: 50%; height: 100px; background: red; } .box2 { float: left; width: 50%; height: 50px; background: yellow; } .box3 { float: left; width: 50%; ...

htmlcsscss-float

Updating an individual item from an array of objects using ReactJS

I am facing an issue with my database's Opening Time table. Whenever I try to modify the opening time of one day, the opening time of other days gets deleted as well. Below is the code snippet I'm using to update my state data: async handleCha ...

javascriptarraysreactjs

Why is the onclick function for anchor tags not functioning in selenium?

My javascript onclick function looks like this: <a href="#" id="download" onclick="Exceldownload('sites')"> <i class="fa fa-download card-down-icon" aria-hidden="true"></i> </a> In my selenium script, I have added th ...

javascriptseleniumselenium-webdriverautomated-testsselenium-chromedriver

Suspend features for moving between pages in history

In the application, we have two main pages - Home.vue and Statistics.vue. The Home.vue page renders the TableFields.vue component. On the Home page, there are fields with numbers that have an initial value of "3" set upon page load. An interval running a c ...

javascriptvue.jsvue-router

Error in SO Embed Snippet Fiddle due to Bootstrap 4 JS Issue

Just wondering, any idea why the bootstrap 4 js is throwing this error: https://i.sstatic.net/J4Iq4.png when trying to embed the snippet? (No errors in the external Fiddle) Added tether.js but no luck (kept it commented). Switched to jQuery 2.2.1 on th ...

javascriptjquerystack-overflowjsfiddletwitter-bootstrap-4

Ways to trigger a callback after the completion of template rendering in Mustache.js

Is there a more efficient way to execute a callback function once Mustache.js completes rendering a template and adding it to the DOM? For instance, is there a method similar to: Mustache.render(template, viewModel, function() {...}); I have attempted to ...

javascriptjquerymustache

Center text inside a circle using CSS styling

Having trouble centering text inside a circular element with the code provided below. I've tried various methods but can't seem to get it aligned both vertically and horizontally. .circle { background: rgba(72, 156, 234, 1); background ...

htmlcss

I recently utilized Bootstrap to create a responsive website, but I've encountered an issue where the space between columns has disappeared. Any suggestions on how to rect

I noticed that when I applied Bootstrap, the flexibility between boxes disappeared. I want to achieve a layout similar to image 2 and also add spaces between the boxes or div elements. .alignboxes{ padding-top:40px; display: flex; justify-co ...

htmlcssbootstrap-4

Issue fetching dropdown menu using Jquery and ajax

Here is a code snippet for a table: <table id="fla_inf" width="100%"> <tbody> <tr> <th class="tab_header" colspan="6">Flavors and Additives</th> </tr> <tr> <th class="tab_header_nam">Flavor Brand</th> ...

jqueryajax

Placement of BOX alongside each other

Whenever I try to align the green and orange boxes side by side, it doesn't seem to work properly. Even though 1000 divided by 2 equals 500 (by the way, I am new to HTML). I am struggling with understanding positions and sizes in HTML. Here is the HT ...

htmlcss

Struggling to find a solution for highlighting or selecting specific objects in InstancedMesh and incorporating a custom HTML tooltip in react three fiber

For days, I've been working on displaying a 3D scatter plot using InstancedMesh of three.js in a React app (specifically with react-three-fiber). After some trial and error, I managed to create the 3D scatter plot of spheres and even assign colors to ...

javascriptreactjsthree.jsreact-three-fiber

Code-based document editing with CouchBase

To test Couchbase, I need to create a servlet that will edit 1,000 JSON documents by changing the value of '"flag": false' to '"flag": true'. How can I achieve this task? Here is my view code for finding documents with '"flag": fa ...

javajavascriptservletsviewcouchbase

Ways to delete scheduled tasks in BreeJS

I am currently working on an express server that initiates a recurring job upon client request for a specific duration. The challenge I am encountering is figuring out how to stop and remove that particular job once it has been completed. The following is ...

javascriptnode.jsexpressjob-schedulingnodejs-server

What are some recommended ways to utilize MongoClient.connect in an Express application that contains multiple routers?

I've come across a scenario in my app where I need to connect to the database multiple times like this: app.get('/', function(req, res){ MongoClient.connect(dbUrl, function(err, db){ //perform database operations }); }); However, I ...

javascriptnode.jsmongodbexpress