0
我想要在我的網站上獲取圖像的3D包裝效果。三維包裝是有點像一個在這imageJS/CSS Combo - 獲取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
值。