Rotate the front view image to the left view with a three-dimensional twist

I've been attempting to rotate the image using the code below, but I can only manage to go from a front view to a bottom view. My goal is to rotate the image from the front view to the left view. Is there a way for me to achieve this?

body {
  height: 100vh;
  margin: 0;
}

.thumb {
  width: 600px;
  height: 400px;
  perspective: 1000px;
}

.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateX(80deg);
  transform-origin: bottom;
}

.thumb a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.thumb a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  transform-origin: bottom;
}

.thumb:hover a:before {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
  <a href="#"></a>
</div>

htmlcsscss-transforms

Answer №1

  1. Switch the rotateX function to rotateY as the left view utilizes the vertical axis.

  2. Update the transform-origin attribute to left since the left side serves as the rotation point.

  3. Implement similar adjustments to the pseudo elements for achieving a 3D effect, as suggested by @kaiido. I have indicated the modifications made.

body {
  height: 100vh;
  margin: 0;
}

.thumb {
  width: 600px;
  height: 400px;
  perspective: 1000px;
  margin: 100px; /* For snippet spacing */
}

.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateY(45deg); /* 1 - From rotateX */
  transform-origin: left; /* 2 - From bottom */
}

.thumb a:after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 36px; /* Interchanged width and height because horizontal transformation is now vertical transformation */ 
  height: 100%;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateY(90deg); /* 1 - From rotateX */
  transform-origin: left; /* 2 - From bottom */
}

.thumb a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateY(15deg) translateZ(-40px) scale(0.75); /* 3 - From rotateX */
  transform-origin: bottom;
}

.thumb:hover a:before {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateY(0) translateZ(-60px) scale(0.85); /* 3 - From rotateX */
}
<div class="thumb">
  <a href="#"></a>
</div>

Answer №2

@manoj-kumar is correct. utilize the rotateX property to execute a rotation along the X-axis, and the rotateY property for a rotation along the Y-axis

you must also define the transform-origin and position attributes for the :after pseudo-element in order to ensure it wraps on the left side

check out this fiddle : https://jsfiddle.net/hellooutlook/6sagLtpk/2/

body {
  height: 100vh;
  margin: 0;
}

.thumb {
  margin: 100px;
  width: 600px;
  height: 400px;
  perspective: 1000px;
}

.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateY(60deg);
  /* From rotateX */
  transform-origin: left;
  /* From bottom */
}

.thumb a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 100%;
  background: inherit;
  background-size: cover, cover;
  background-position: bottom;
  transform: rotateY(110deg);
  transform-origin: left;
  /* extra */
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.thumb a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  opacity: 0.15;
  transform: rotateX(15deg) translateZ(-40px) scale(0.75);
  transform-origin: bottom;
}

.thumb:hover a:before {
  opacity: 1;
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
  <a href="#"></a>
</div>

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

What is the solution to making text appear on the top rather than on the side?

Seeking a way to keep the text description above the textbox within a definition list, however currently the text appears to the left of the box. Here is the provided HTML structure: <dl> <dt> <label>Phone Number</label> &l ...

htmlcss

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. ...

javascriptjquerycsscarousel

Comparison of Chrome's compatibility with Bootstrap and Edge

Firefox Safari I am facing an issue that seems obvious, but I am unable to pinpoint the exact cause. It just doesn't seem right for no apparent reason. is the website in question. I have tried various troubleshooting methods such as inspecting th ...

javascripthtmlcssfrontendbootstrap-5

The function element.checked = true/false in Vanilla Javascript seems to be malfunctioning

Here is the HTML code I am working with: <ul class="nav md-pills pills-default flex-column" role="tablist"> <li class="nav-item"> <input type="radio" name="q01" value="1" hidden checked> <a class="nav-link choice01 ...

javascripthtmlradio-buttonchecked

Display a PHP warning message when attempting to add methods to ajax jQuery

Recently, I have delved into the world of ajax and jQuery while working on my final year project. However, I have encountered a problem when adding methods to my JavaScript code. Here is an excerpt from my ajax script: $(document).ready(function() { $ ...

phpjqueryhtmlajaxdebugging

The position of the carousel items changes unpredictably

My jQuery carousel consists of 6 individual items scrolling horizontally. Although the scroll function is working correctly, I have noticed that 2 of the items are randomly changing their vertical position by approximately 15 pixels. Upon reviewing the HT ...

javascriptjqueryhtmlcsscarousel

Incorporating Twitter Bootstrap into your Zend Framework 2 Navigation Menu

I have successfully created a menu from my database and the code is functioning perfectly. Now, I'm looking to enhance the menu's style by incorporating Twitter Bootstrap, but I'm encountering some difficulties in doing so. Is there anyone k ...

csstwitter-bootstrapzend-framework2

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...

iphonehtmlcssasp-classicviewport

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

javascriptjqueryhtmlwindoweval

What are the reasons for not accessing elements in a more "direct" way like elemId.innerHTML?

Recently, I came across a piece of JavaScript code that accesses HTML elements using the shorthand elementID.innerHTML. Surprisingly, it worked perfectly fine, but interestingly, most tutorials opt for the traditional method of using document.getElementByI ...

javascripthtmldom

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar

What steps are involved in generating a scene dynamically with A-Frame?

Looking to transition from declarative coding in js and html to a programmatic approach with Aframe? You might be wondering if it's possible to modify your scene dynamically, here is an example of what you're trying to achieve: <!DOCTYPE html ...

javascripthtmlaframevirtual-reality

Converting a text area into a file and saving it as a draft in the cloud with the

Can content from a text area be converted into a file of any chosen format and saved in the cloud? Additionally, should every modification made in the text area automatically update the corresponding file stored in the cloud? ...

javascriptphphtmljsoncloud

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

htmlcsstwitter-bootstraprowtwitter-bootstrap-3

The width of the HTML select dropdown needs to be adjusted as it appears too large

I've been trying to find a solution to my issue, but I'm having trouble locating one. It could be because English is not my first language and maybe I'm not searching using the right terms. The problem I'm facing is with implementing t ...

jqueryhtmlcssselectwidth

Flexbox CSS Card Layout Behavior

Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax <div class="ui container"> <div class="ui four cards stackable"> <div class="teal card"> ...

htmlcsssemantic-uicss-grid

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

htmlcssbootstrap-4

Using the HTML Style Tag in Android Development

After doing some research on articles and websites, I discovered that it is possible to create an HTML file and then display it using Android WebView. I referenced the following: Android WebView (WebKit) Tutorial Understanding User Interface in Android ...

htmlandroidandroid-widgetandroid-webview

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

htmlcssangularjs

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction