第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

將圖像從前視圖旋轉(zhuǎn)到左視圖，具有 3D 效果

將圖像從前視圖旋轉(zhuǎn)到左視圖，具有 3D 效果

慕的地8271018 2023-09-25 18:15:42
我使用下面的代碼來(lái)旋轉(zhuǎn)圖像，但我只能實(shí)現(xiàn)將圖像從前視圖旋轉(zhuǎn)到底視圖。我想將圖像從前視圖旋轉(zhuǎn)到左視圖。我怎樣才能實(shí)現(xiàn)這個(gè)目標(biāo)？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 回答

?
交互式愛(ài)情

TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊

  1. 修改rotateX為rotateY，因?yàn)樽笠晥D使用垂直軸。

  2. 修改transform-origin為left，我們以左側(cè)為旋轉(zhuǎn)點(diǎn)進(jìn)行變換。

  3. 對(duì)偽元素應(yīng)用類似的更改以獲得 3D 外觀，如 @kaiido 提到的。我已經(jīng)評(píng)論了所做的更改。

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>


查看完整回答
反對(duì) 回復(fù) 2023-09-25
?
慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊

利用rotateX到rotateY

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

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


查看完整回答
反對(duì) 回復(fù) 2023-09-25
  • 2 回答
  • 0 關(guān)注
  • 161 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)