首頁猿問將圖像從前視圖旋轉到左視圖，具有...

將圖像從前視圖旋轉到左視圖，具有 3D 效果

Html5

慕的地8271018 2023-09-25 18:15:42

我使用下面的代碼來旋轉圖像，但我只能實現將圖像從前視圖旋轉到底視圖。我想將圖像從前視圖旋轉到左視圖。我怎樣才能實現這個目標？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>

查看完整描述

2 回答

交互式愛情

TA貢獻1712條經驗獲得超3個贊

修改rotateX為rotateY，因為左視圖使用垂直軸。
修改transform-origin為left，我們以左側為旋轉點進行變換。
對偽元素應用類似的更改以獲得 3D 外觀，如 @kaiido 提到的。我已經評論了所做的更改。

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 */

}

? <a href="#"></a>

</div>

反對回復 2023-09-25

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

利用rotateX到rotateY

你還必須設置transform-origin并position使其:after在左側換行

小提琴： 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>

反對回復 2023-09-25

2 回答
0 關注
148 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將圖像從前視圖旋轉到左視圖，具有 3D 效果

將圖像從前視圖旋轉到左視圖，具有 3D 效果

2 回答

添加回答

將圖像從前視圖旋轉到左視圖，具有 3D 效果

將圖像從前視圖旋轉到左視圖，具有 3D 效果