Используйте CSS для достижения эффекта перспективы
Сегодня мне пришла в голову идея использовать CSS для достижения эффекта перспективы. Сначала я подумал о нашем обычном методе добавления эффектов тени, который достигается за счет использования нескольких элементов div через смещение, но для этого требуется много элементов div, что не идеально. Затем я подумал о свойстве CSS: border, которое может создавать диагональный эффект на стыке границ. Этого можно добиться с помощью двух элементов div. Давайте сначала посмотрим на конечный эффект, а затем проанализируем процесс реализации.
Во-первых, давайте посмотрим, как граница создает диагональный эффект. Добавьте следующий код в заголовок вашего HTML-кода, и вы увидите такой эффект.
.border{ширина:0;высота:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}
Используя приведенную выше основу, мы можем использовать два дополнительных элемента div для достижения эффекта перспективы.
1. HTML-код выглядит следующим образом :
<div class="perspective-outer">
<div class="perspective-r"></div>
<div class="perspective-b"></div>
<div class="perspective-inner">Элемент эффекта перспективы</div>
</div>
2. CSS-код:
.perspective-outer{
положение: родственник;
width:170px;/*Ширина элемента для достижения эффекта перспективы + расстояние перспективы*/
height:140px;/*Высота элемента для достижения эффекта перспективы + расстояние перспективы*/
}
.perspective-inner{
граница: 1 пиксель, сплошной #f60;
высота: 118 пикселей;
ширина: 148 пикселей;
цвет фона: #fff;
}
.перспектива-р,
.perspective-b{
позиция: абсолютная;
ширина: 0;
высота: 0;
}
.perspective-r{
правильно: 0;
height:100px;/*Высота элемента для достижения эффекта перспективы (120px) - (border-top:20px)*/
border-left:20px сплошной #000;/*расстояние перспективы справа*/
border-top:20px сплошной #fff;/*перспективное расстояние ниже*/
}
.perspective-b{
внизу: 0;
width:150px;/*Ширина самого внешнего элемента (170px) — граница слева*/
левая граница: 20 пикселей сплошная #fff;
border-top:20px сплошной #000;
}
.perspective-outer определяет высоту и ширину и позиционирует их относительно, чтобы гарантировать, что области перспективы справа и снизу могут быть расположены в соответствующих позициях. Значения высоты и ширины — это высота элемента для достижения перспективы. эффект плюс соответствующее расстояние перспективы. .perspective-r нужно только установить значение высоты, и его значение равно высоте .perspective-outer минус border-top. .perspective-b нужно только установить значение ширины, а его значением является ширина .perspective-. внешний минус граница-левая. Значения ширины border-top .perspective-r и border-left .perspective-b определяют угол перспективы. Значения ширины border-left из .perspective-r и border-top из .perspective-b определяют перспективное расстояние. Среди них цвет border-top .perspective-r и border-left .perspective-b — это цвет фона родительского элемента. Родительский элемент моей тестовой страницы — это body, поэтому он белый.
3. Постскриптум
Эта статья — всего лишь простой тест, его цель — вдохновить других. Нас не волнует, насколько практичен этот метод, но он, по крайней мере, может дать нам способ решить проблему. Надеюсь, эта статья может быть вам полезна.