Увеличить использование перспективы и преобразования: Transtatez. Традиционный дисплей продукта может не привлечь внимание пользователей, но, если к дисплее добавлены необходимые 3D -элементы, возможно, эффект хорош ~
Карта эффекта:
Объясните: это творчество не то, что я думаю, имитируя других, творчество должно быть на w3cplus. Конечно, дело в том, чтобы научить всех, как это сделать, просто быть высокой имитацией ~
Прежде всего, научите вас использовать CSS3, чтобы сделать квадрат:
Прежде чем есть CSS, такой куб должен быть трудно сделать ~ ну, я думаю, что это сложно ~
HTML:
<body> <div class = wapper> <div class = cube> <div class = sign от> 1 </div> <div class = размер обратно> 6 </div> <div class = sign> 4 </div </div> <div class = размер слева> 3 </div> <div class = size top> 5 </div> <div class = sign> 2 </div> </div> </body>
Стадия WAPPER для этого эффекта, то есть установка элемента перспективы. Куб представляет куб, а затем 6 Div представляет каждую сторону.
Div#Cube Settings Transform-Style: Proveerve-3D, а затем установите вращение и перевод каждого элемента
Теперь вся лапша перекрывается на одной плоскости, мы сдаемся:
Шрифт движется вперед, расстояние полумаржина (50px) направления оси z составляет 50px;
Сначала сначала вращается на 180 градусов вокруг оси Y, так что шрифт находится снаружи, а затем Translatez (50px), потому что в настоящее время он был повернут на 180 градусов, поэтому Танслатес находится вниз, и он вниз, и он находится в вниз.
Точно так же, другая плоскость вращается на 90 градусов вокруг оси x или оси y, а затем Translatez (50px)
CSS:
.wapper {Margin: 100px Auto 0; Width: 100px; Height: 100px; -webkit-Perspective: 1200px; FONT-SIZE: 50px; FONT-Weight: Bold; COLOR: #fff;} .Cub. e {positive: related ; Высота: 100px; ;} .top {-webkit -Transform: rotatex (90deg) transtatez (50px);}. 90deg) translatez (50px);} .bottom {-webkit-transform: rotatex (-90deg) transtatez (50px);} .back {-webkit-transform: rotatey (-180deg) (50px);}Для эффекта отображения вы можете настроить расстояние перспективы ~
Ну, куб понимается, поэтому этот продукт не сложно;
HTML:
<! > <ul id = content> <li> <div class = warper> <img src = images/a.png> <span class = информация> <strong> контракт </strong> eaSiet way a a act в вашем магазине. </Span> </div> </li> <li> <div class = warper> <img src = images/b.jpeg> <span class = Information> <strong> Форма контракта </strong> самый простой способ к Добавьте форму Contal в свой магазин. </strong> самый простой способ добавить контактную форму в ваш магазин.
CSS:
<Style type = text/css> body {font-family: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #content .wrapper, #content li img, #contentitit li span {width: 310px; 888888;*/} #content .wrapper {posity: invident: -webkit-transform-style: reverve-3d; : 3px; : -Webkit-Gradient (линейный, левый верх, левое дно, цветовое стоп (0%, RGBA (236, 241, 244, 1)), цветовой стоп (100%, RGBA (190, 202, 217, 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 , 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1, 1, 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1, 117, 1)); 6s; 255, 255, 255, 0,5); Transform: rotatex (95Deg);} #Content Li: Hover Img {Box-Shadow: None; , 0,3);CSS в основном был проанализирован выше. Разрешить всю стадию обмена продуктами, поэтому мы добавили для него Div Последний эффект переворачивания действительно на Div.wapper.
Исходный код нажмите, чтобы загрузить
Приведенное выше содержимое этой статьи.