На сегодняшнем курсе я познакомлю вас с тем, как создать 3D -кубики с помощью CSS3. Вы можете просмотреть фактические эффекты через ссылку ниже, управлять вверх и вниз левой и правой клавиши, чтобы достичь эффекта флип -куба.
Демо -адрес : http://www.cuoxin.com/jiaoben/70022.htmlДавайте начнем с того, как это сделать.
HTML :<div id = "Эксперимент">
<div id = "cube">
<div>
Одно лицо
</div>
<div>
Вверх, вниз, влево, справа
</div>
<div>
Лорем Ипсум.
</div>
<div>
Новые формы навигации - это весело.
</div>
<div>
Вращающийся 3D куб
</div>
<div>
Больше контента
</div>
</div>
</div>
В HTML выше 6 DIV с классом в качестве лица представляют 6 грани куба, и они отличаются с использованием имен классов от одного до шести. Внешний контейнер содержит два слоя контейнеров с идентификационным кубом и экспериментом. Оба слоя необходимы. Без какого -либо трехмерного эффекта не может быть произведен.
Среди них эксперимент играет роль объектива. Установите фокусное расстояние, чтобы эффект 3D мог быть отображаться на внутренних элементах.
Перспективный атрибут определяет глубину плоскости оси Z, а также определяет относительные размеры элементов выше и ниже плоскости. В целом, чем меньше перспективное значение, тем больше объект, тем ближе он к вам; Чем больше значение перспективы, тем меньше объект, тем дальше от вас. Вы можете просмотреть эффект через http://www.webkit.org/blog-files/3d-transforms/persperive-by-example.html.
Свойство перспективного происхождения определяет происхождение перспективы.
CSS :#Experiment {
-Вебкит-перспектива: 800;
-Моз-перспектива: 800;
-О-перспектива: 800;
Перспектива: 800;
-Вебкит-перспектива-аоригин: 50% 200px;
-Моз-перспектива-аоригин: 50% 200px;
-o-persperive-origin: 50% 200px;
Перспективная аоригин: 50% 200px;
}
Свойства, установленные кубом, содержат фиксированную ширину и высоту, и устанавливают положение относительно. Необходима фиксированная высота и ширина, чтобы элементы в кубе могли выполнять 3D -анимацию в определенной области. Если вы установите высоту и ширину на 100%, элементы в кубе будут перемещаться по всему диапазону страниц.
Переход используется для установки связанных с анимацией свойств. Стиль преобразования: заповедник-3D; Делает все элементы в кубе производить 3D -эффекты в целом.
Вы можете просмотреть http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-persperive-animate-transition/ Для получения дополнительной информации.
CSS:
#cube {
позиция: относительно;
Маржа: 100px Auto;
Высота: 400px;
Ширина: 400px;
-Вебкит-трансляция: -Webkit-transform 2s Linear;
-Моз-трансляция: -Moz-трансформ 2S линейный;
-О-транзиция: -o-transform 2s Linear;
Переход: преобразование 2s линейно;
-Вебкит-трансформный стиль: reserve-3d;
-Моз-трансформный стиль: reverve-3d;
--
Стиль преобразования: заповедник-3D;
}
Затем установите атрибут CSS для 6 лиц куба.
CSS :.лицо {
позиция: абсолютно;
Высота: 360px;
Ширина: 360px;
Заполнение: 20px;
фоновый цвет: rgba (50, 50, 50, 0,7);
}
Затем установите 3D-связанные свойства 6 грани, используйте Rotatex или Rotatey для достижения переворачивания поверхности куба и используйте Transtatez для достижения движения поверхности куба в трехмерном пространстве.
CSS :#Cube .One {
-Webkit-Transform: Rotatex (90Deg) Translatez (200px);
-Моз-трансформ: rotatex (90deg) translatez (200px);
-o-transform: rotatex (90deg) translatez (200px);
преобразование: rotatex (90deg) translatez (200px);
}
#cube .two {
-Webkit-transform: transtatez (200px);
-Моз-трансформ: Translatez (200px);
-o-transform: translatez (200px);
Преобразование: Translatez (200px);
}
#cube .three {
-Вебкит-трансформ: Rotatey (90Deg) Translatez (200px);
-Моз-трансформ: Rotatey (90deg) Translatez (200px);
-o-transform: rotatey (90deg) translatez (200px);
Преобразование: Rotatey (90Deg) Translatez (200px);
}
#cube .four {
-Вебкит-трансформация: Rotatey (180Deg) Translatez (200px);
-Моз-трансформ: Rotatey (180deg) Translatez (200px);
-О-трансформирование: Ротатей (180deg) Translatez (200px);
Преобразование: Rotatey (180Deg) Translatez (200px);
}
#cube .five {
-Webkit-Transform: Rotatey (-90Deg) Translatez (200px);
-Моз-трансформ: Rotatey (-90deg) Translatez (200px);
-o-transform: rotatey (-90deg) translatez (200px);
Преобразование: Rotatey (-90deg) Translatez (200px);
}
#cube .six {
-Webkit-transform: rotatex (-90deg) translatez (200px);
-Моз-трансформ: rotatex (-90deg) translatez (200px);
-o-transform: rotatex (-90deg) translatez (200px);
преобразование: rotatex (-90deg) translatez (200px);
}
Последнее, что нужно сделать, это связать событие Keydown с страницей, чтобы при нажатии клавиш вверх, вниз, влево и правую часть достигается эффект движения куба.
JavaScript:
var xangle = 0, yangle = 0;
document.addeventlistener ('keydown', function (e)
{
Переключатель (E.KeyCode)
{
Случай 37: // осталось
yangle -= 90;
перерыв;
случай 38: // up
xangle += 90;
перерыв;
Случай 39: // справа
yangle += 90;
перерыв;
Случай 40: // вниз
xangle -= 90;
перерыв;
};
$ ('cube'). style.webkittransform = "rotatex ("+xangle+"deg) rotatey ("+yangle+"deg);
}, ЛОЖЬ);
Это все для курса, вы можете попробовать это дальше.