[英]JS/CSS Combo - Getting 3D Image Wrap Effect
我正在嘗試為網站上的圖像獲取3D環繞效果。 3D包裝類似於此圖中的包裝
我需要的效果與圖片中的效果完全一樣
以下是我目前用於實現此功能的純CSS。
.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
值。
弄清楚了。 代碼如下
.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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.