各要素のCSSパースペクティブ

クリックで反転して追加情報を表示できるカードのリストを使用しています。私はそれを見栄えにするためにいくつかの視点を追加したいと思います。各要素のCSSパースペクティブ

私の問題は、リストにいくつかの視点を与えるために、ul要素に視点を取り付ける必要があるということです。原点は親の大きさで定義され、上と下のものは非常に醜い方法で変形されるが、中間のターンでは要素を視点なしで作る。

各要素に独自の視点を与えて滑らかな3D外観を持たせる方法はありますか？できればJavaScriptを使用しないでください。

ul { 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all .3s ease; 
 
} 
 
li:hover { 
 
    transform: rotateY(180deg); 
 
}

<body> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 

 
</body>

出典

2017-02-15 Sinan Theuvsen

は私が正しくあなたの質問を理解している場合、私は知らないそれ自身の視点に各要素に

を与えるための方法があります：静的、内部要素を変換しかし、私はあなたが探しているものは以下のようだと思います。 perspectiveの値をtransformプロパティとともに与えることで、perspectiveプロパティをulに設定したときのように、3次元空間を作成するのではなく、各要素に直接与えることになります。

これは、最初の要素か中間の要素か最後の要素かにかかわらず、各要素は同じ方法で回転することを意味します。

パースされていない状態またはデフォルト状態（liセレクタ）には、逆方向の遷移も適切に行われるため、パースペクティブが適用されます。これが設定されていない場合は、（a）ホバーアウト時にパースペクティブが適切に適用されず、（b）速いホバーインアウト時にジャーク動作が発生することがあります。

詳細はthis CSS Tricks articleにあります。そこのデモで見ることができるように、パースペクティブが子どもに直接割り当てられている場合、それぞれが親に適用されたときと同じように見えます。

（注：私はちょうどデモのための移行期間を少し変更した（1）（2）あなたが探している正確な効果を得るために、斜視値で遊んする必要があると思います私はあなたにチューニングを残すだろう。）

li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all 1s ease; 
 
    transform: perspective(125px) rotateY(0deg); 
 
} 
 
li:hover { 
 
    transform: perspective(125px) rotateY(180deg); 
 
}

<body> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 

 
</body>

出典

2017-02-15 10:41:33 Harry

ありがとう、これは私が探していたものです。私はあなたの答えを投票しましたが、私はまだそれを数えるために十分な評判を持っていません。 –

@ SinanAl-Kuri：それはいいです。あなたは十分なrep（15）をまだ持っていないので、答えを投票することはできません。しかし、答えは受け入れられたものとしてマークすることができます。この回答に対応する投票ボタンの下にある空白の空白の目盛りをクリックします。これは通常、どのように問題がSOで「解決」されているかです。そして、あなたは歓迎です:) – Harry

この

ul { 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all 2s ease-out; 
 
} 
 
li:hover { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

出典

2017-02-15 10:32:58

申し訳ありませんが、あなたは-webkit接頭辞を追加することを除いて内容を変更しましたか？ –

私の考えを試しはliのそれぞれに内側容器すなわち<span>を設定することで、を維持します

ul { 
 
    -webkit-perspective: 600px; 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
} 
 
li span { 
 
    display: block; 
 
    height: 100%; 
 
    background-color: lightgrey; 
 
    transition: all .3s ease; 
 
} 
 
li:hover span { 
 
    transform: rotateY(180deg); 
 
}

<body> 
 
\t <ul> 
 
\t \t <li><span>1</span></li> 
 
\t \t <li><span>2</span></li> 
 
\t \t <li><span>3</span></li> 
 
\t \t <li><span>4</span></li> 
 
\t \t <li><span>5</span></li> 
 
\t \t <li><span>6</span></li> 
 
\t \t <li><span>7</span></li> 
 
\t </ul> 
 

 
</body>

出典

2017-02-15 10:35:47 Banzay

私はホバリングのちらつきを解決するためにこの解決策を知っています、ありがとう。しかし、それは遠近問題を解決しません。 –

各要素のCSSパースペクティブ

答えて

関連する問題