Перспектива 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).

Это означает, что каждый элемент, будь то первый или находится посередине или находится на последнем, будет вращаться так же, как и другой.

Перспектива применяется к не-зависанию или по умолчанию (li селектор), так как обратный переход также должен произойти должным образом. Если это не задано, (а) перспектива не будет правильно применяться во время зависания и (б) иногда она вызывает отрывистое движение во время быстрого наведения.

Дополнительную информацию можно получить в 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 префикс? –

Моя идея состоит в том, чтобы установить внутренний контейнер т.е. <span> в каждом из li, и держать li статических, преобразование внутреннего элемента:

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 для каждого элемента

ответ

Смежные вопросы