HTML5+CSS3: 3D Альбом Trojan Effect Album

Цель этого блога заключается в том, что соблазнительный экземпляр специального экземпляра HTML5 CSS3 создал эффект 3D -провалов Baidu Tieba.

Диаграмма эффектов: Эй, я сделал несколько фотографий окончания колледжа в ротари -троян, вращаясь вокруг моего большого текста, и благодать выращивания моей альма -матер ~

Перспективные атрибуты включают два атрибута: нет и длина единицы.

Среди них значение по умолчанию атрибута перспективы не является, что означает, что 3D -объект просматривается под неограниченным углом, но он выглядит плоским. Другое значение <langth> принимает значение единицы, превышающего 0. И его подразделение не может быть процентным. Чем больше значение <langth>, тем дальше появляется угол, чтобы создать довольно низкую прочность и очень маленькое трехмерное пространство. И наоборот, чем меньше это значение, тем ближе к углу, тем ближе, чтобы создать высокий угол интенсивности и большое трехмерное изменение. Проще говоря: когда установлены настройки перспективы, чем меньше, это означает, что чем более очевиден 3D -эффект, тем ближе ваши глаза ближе к 3D -объекту, и наоборот.

Предполагая, что когда вы устанавливаете перспективу: 300px, тем меньше значение Transtatez, тем меньше размер дочернего элемента.

1. Прежде всего, контейнер всех изображений - это положение: абсолютное, наложенное вместе, а затем устанавливайте вращения за один раз до 40*I, i = 0, 1, 2 ... 9;

2. Затем установите Translatez для каждого изображения контейнера.

HTML:

 <! Text/Javascript src = ../../ jQuery-1.8.3.js> </script> <script type = text/javascript> // alert (64/math.tan (20/180 * math.pi))) ); ; deg *] i ++)+deg))})});}); /1.jpg/> <pan> делайте по одному за раз и делайте хорошо .. </span> </li> <li> <img src = img/2.jpg/> <pan> сделать одну вещь в время, и хорошо > <Img src = img/4.jpg/> <pan> Whatver делает слово, это слово делает хорошо. . > .jpg/> <pran> jact of All Trands и Master of None </li> </div> </body> </html "

CSS:

 Li {ширина: 128px; 0, 0, .5); {Th: 900px; jpg) no-repeat 0 0; -Переход: -Вебкит-трансформ 1S; (0deg) transtatez (300px);} li: nth-child (1) {-webkit-traansform: rotatey (40deg) transtatez (300px);} li: nth-cill 80deg) transtatez (300px);} li: nth-child (3) {-webkit-transform: rowatey (120deg) transtatez (300px);} li: nth-cill (300px);} li: nth-child (5) {-webkit-traansform: rowatey (200deg) transtatez (300px);} li: nth-child (6) {-webkit-transform: rowatey (240deg) transez ( 300px);} li: nth-child (7) {-webkit-traansform: rowatey (280deg) transtatez (300px);} li: nth-child (8) {-webkit-transform: utatey (300px);} li: Nth-Child (9) {-webkit-Transform: rotatey (360Deg) Transtatez (300px);}

Div#-это сцена, набирает перспективу, каждый LI устанавливает rowatey и Transtatez; Значение по умолчанию это означает, что все подэлементы представлены в 2D -самолетах. Заповедник-3D указывает, что все подэлементы представлены в трехмерном пространстве. Если значение стиля преобразования устанавливается на заповедник-3D на элементе, это указывает на то, что оно не выполняет плоскую выставочную операцию, и весь его подэлемент расположен в трехмерном пространстве. При нормальных обстоятельствах этот атрибут используется для элемента выполнения 3D -анимационных эффектов, то есть он использует эффекты трехмерной анимации, поэтому его подэлементы должны быть в трехмерном пространстве.

Одна вещь, чтобы обратить внимание: в этом примере эффект анимации на самом деле является щелчком мыши. Он должен вращать этот троян, поэтому вам нужно только каждый раз менять угол rowatey 40 контейнера Div#.

Приведенное выше содержимое этой статьи.