creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck.

It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property.

Does anyone know of something similar available online?

I'm really hoping someone can point me in the right direction. Thank you.

If there is sufficient space, the boxes will display without any rotation:

If there isn't enough space, the script will adjust the rotation to bring them closer together:

Answer №1

It seems like your example is demonstrating a y-rotation effect. Here's a simple code snippet to achieve this:

body {
  display: flex;
}

div {
  width: 150px;
  height: 150px;
  background: url('https://picsum.photos/200?random');
  transition-duration: .35s;
  box-shadow: -3px 3px 3px #000;
}

div:hover {
  transform: rotateY(70deg);
  transition-duration: .35s;
}
<div></div>
<div></div>
<div></div>

Answer №2

In search of a tool that can add rotation or animation effects to HTML Elements? Look no further than animate.css. Simple to implement and yields great results!

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

Tips for passing a JavaScript array to an MVC controller

In my asp.net application, I have implemented a functionality where users can order food. Additionally, there is an admin page where admins can login and create a menu for a specific week. I have successfully developed the "Menu maker" feature where all me ...

Tips for emphasizing v-list-item on click (Vue)

I am currently working on a side menu that changes based on the selected router model. My goal is to have the selected page highlighted when clicked. I would like this functionality for all the submenus as demonstrated in this example. Below are snippets ...

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

Problem with loading images on an HTML webpage

https://i.sstatic.net/aQ0oD.png After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CS ...

jQuery modal popup failing to display the value of an element

When attempting to display content in a Bootstrap 4.0 modal on an ASP.NET Core 3.1 Razor page, the jQuery shown.bs.modal event seems to be failing to show the element value within the modal. Strangely, logging the assigned value to the console displays it ...

Attempting to create distinct match matchups for every team in a manner reminiscent of the Swiss system format used in the 2024/25 UEFA Champion League

I've been working on devising a tournament pairing system modeled after the updated UEFA Champion League structure. The league phase involves 36 teams, categorized into 4 different pots. Each team is scheduled to play a total of 8 matches against 2 op ...

Tips for implementing styling in a material table within a reactjs application

Is there a different way to set the display property to inline-block since cellStyle doesn't seem to recognize it? How can I adjust the width of a specific column, let's say with the name title, without affecting the width of all other co ...

Socket.io operates individually with each user

Showing a basic web-chat using socket.io. Node.js code: io.on('connection', function(socket) { // Sends 'hello world' message to all users socket.emit('send:message', { text: 'hello world' }); ...

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

What is the process for sending an InMemoryUploadedFile to my S3 storage?

My upload form is quite simple and includes an image as a FileField: def post(request): if request.user.is_authenticated(): form_post = PostForm(request.POST or None, request.FILES or None) if form_post.is_valid(): inst ...

What is AngularJS global data binding?

My template has a dynamic title that is inserted using the following code: <title>{{title}}</title> For each of my pages/routes, I use a different controller where I define the title like this: BackyApp.controller('HomeController', ...

The result after calling JSON.parse(...) was not accurate

The following method is used in the controller: @RequestMapping(value = "channelIntentionDetails.html", method = RequestMethod.POST) public @ResponseBody Report getChannelIntentionDetails(@RequestBody SearchParameters searchParameters) { LOGGER.in ...

"Mastering the art of utilizing Async in combination with waterfall and Recursion in node

I've developed a script for transferring data from Dynamo to a MySQL database. Initially, I encountered performance issues on the SQL side due to not using asynchronous calls. To address this, I integrated the async library to throttle the Dynamo segm ...

Ways to stop jQuery functions after they have already been run

Users can navigate through a tabbed interface by using tabs When a user clicks on a tab, results specific to that tab are displayed in a visible div, while the rest remain hidden Each tab may have multiple sets of results, each set requiring certain functi ...

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Having a background in PHP, I am accustomed to using a PHP file to handle all of my ajax calls. Recently, I have been introduced to ASP.NET controls and the overall environment. I am curious about the correct method for handling ajax requests when they n ...

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

Incorporating conditional statements within a loop

I'm racking my brains over this issue, can you lend a hand? Currently, I am extracting data from a website. The .MyElement containers on the site store either gif or jpg URLs that I need to retrieve. In my node.js app, I am utilizing a Cheerio-base ...

Displaying images in a horizontal row instead of a vertical column when using ng-repeat

I am currently using ng-repeat to showcase a series of images. While I believe this may be related to a CSS matter, I am uncertain. <div ng-repeat="hex in hexRow track by hex.id"> <img ng-src="{{hex.img}}"/> </div> https://i.sstatic ...

Update the class of the element that is currently selected using jQuery and the `this` keyword

Is there a way to change the class on hover only for the current element using 'this'? The code I have changes classes for all elements, but I need it to work individually. Here is the code snippet I'm currently using: https://codepen.io/ky ...