각 요소의 CSS 퍼스펙티브

클릭시 뒤집을 수있는 카드 목록을 사용하여 추가 정보를 표시합니다. 보기 좋게 보이도록 약간의 관점을 추가하고 싶습니다.각 요소의 CSS 퍼스펙티브

내 문제는 목록에 일부 원근감을주기 위해 ul 요소에 원근감을 첨부해야한다는 것입니다. 원점은 부모의 크기에 의해 정의되며, 위쪽 및 아래쪽에있는 요소는 매우 못생긴 방식으로 변환되는 반면 원근법없이 중간 차례에는 요소를 만드는 요소입니다.

각 요소에 부드러운 3D보기를 제공하는 자체 관점을 제공 할 수있는 방법이 있습니까?

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 : 좋습니다. 아직 충분한 담당자 (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>을 설정하고, 0,123,426 유지

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

호버 (hover)에서 깜박임을 해결하기 위해이 해결책을 알고 있습니다. 감사합니다. 그러나 그것은 원근법 문제를 해결하지 못합니다. –

각 요소의 CSS 퍼스펙티브

답변

관련 문제