JS/CSS 콤보 - 3D 이미지 둘러싸 기 효과 적용

Question

내 웹 사이트에서 이미지의 3D 랩 효과를 얻으려고합니다. 의 3D 랩은 내가 필요로 효과는 이미지

다음 나는 순간에이를 구현하기 위해 사용하고 순수 CSS는 같이 정확하게이 image

의 하나 같은 것입니다.

.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%; 
    } 

코드는 작동하지만 문제는 모든 이미지에서 작동하지 않는다는 것입니다. 너비가 너비보다 큰 이미지는 위의 코드가됩니다.

누군가 내가 JS 알고리즘으로 나를 도울 수 있는지 궁금해서 /이 일을하는 기존의 (선호하는 것은 무료) js. 알고리즘은 img 요소의 너비와 높이를 캡처 한 다음 위의 코드에 대해 transform 값을 렌더링해야합니다.

Answer 1

알아 냈어. 코드는 다음과 같습니다.

.gallery-wrap{ 
    perspective: 1000px; //required to get 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; //This and the next 2 lines are for left edge. Change bottom/top/right accordingly 
    transform: rotateY(90deg); // Y is the Axis of rotation. Change accordingly. 90deg will flip (mirror) the image 
    transform-origin: left; // Which side to be flipped 
} 
.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>"); // Just to add a gradient effect to the farther side 
    background-size: 0, cover; //To get the gradient effect 
    transform-style: preserve-3d; 
    transition: all 0.5s; 
    margin: 10% auto; // This and the next line 2 line are dimension adjustments 
    width: 80%; 
    transform: rotateY(37.5deg); // This is for the main image rotation 
    transform-origin: center; // This is for point of origin of the transform. Use center for the best effect; 
} 

이미지는 배경 이미지로 사용해야합니다. 요소

구조 - 원본 소스 .gallery-wrap > div

크레딧 - TheCodePlayer