Делаем » Эффект 3D картинки

0  37

Есть много способов скрыть информацию и показать ее, например, при наведении на картинку.
Делаем эффекта квадрата с текстом, который заменяется друг другом и только используя CSS3.

Астрофизика

Имя персонажа: Астрофизика
110 Орк Охотница (Стрельба)
Сумма достижений: 19 710
Почетные победы: 82 659
Время в игре с 2008 года
World of Warcraft

 

HTML часть — Эффект 3D кнопки

Эффект квадрата создаются с помощью html кода. Изначально текст, который находится в с css стиле information скрыт и появляется он лишь при наведении на картинку:

<div class="wrapper">
<div class="item"><a href="https://worldofwarcraft.com/ru-ru/character/deepholm/%D0%B0%D1%81%D1%82%D1%80%D0%BE%D1%84%D0%B8%D0%B7%D0%B8%D0%BA%D0%B0" target="_blank" rel="noopener"><img class="alignnone size-thumbnail wp-image-1276" src="/wp-content/uploads/2016/01/astrofizikawow-250x250.jpg" alt="Астрофизика" width="250" height="250" /></a>
<span class="information">
<strong>Имя персонажа: Астрофизика</strong>
110 Орк Охотница (Стрельба)
Сумма достижений: 19 710
Почетные победы: 82 659
Время в игре с 2008 года
</span></div>
</div>
<div class="itemtob">World of Warcraft</div>

Здесь мы и задаем все свойства для отображения и анимации. И создаем эффект 3D трансформирования:

CSS часть

.wrapper{margin:1em 1.5em 2em 0;cursor:pointer;font-family:Tahoma,Arial;width:250px;height:250px}.itemtob{background-image:url(/wp-content/uploads/2017/05/botm1.png);text-transform:uppercase;margin-bottom:50px;color:#e83e3e;text-shadow:1px 1px 0 #521b1b,1px 1px 1px #3a0d0d;border-radius:10px 10px 90px 90px / 30px 30px 90px 90px;padding:9px;margin-top:-21px;width:240px;position:absolute;text-align:center}.item{width:250px;height:250px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .6s;-moz-transition:-moz-transform .6s;-ms-transition:-ms-transform .6s;-o-transition:-o-transform .6s;transition:transform .6s}.item:hover{-webkit-transform:translateZ(-50px) rotateX(95deg);-moz-transform:translateZ(-50px) rotateX(95deg);-ms-transform:translateZ(-50px) rotateX(95deg);-o-transform:translateZ(-50px) rotateX(95deg);transform:translateZ(-50px) rotateX(95deg)}.item:hover img{box-shadow:none;border-radius:15px}.item:hover .information{border-radius:3px}.item img{display:block;position:absolute;top:0;border-radius:3px;-webkit-transform:translateZ(120px);-moz-transform:translateZ(120px);-ms-transform:translateZ(120px);-o-transform:translateZ(120px);transform:translateZ(120px);-webkit-transition:all .6s;-moz-transition:all .6s;-ms-transition:all .6s;-o-transition:all .6s;transition:all .6s}.item .information{display:block;position:absolute;top:0;width:250px;height:250px;text-align:left;border-radius:15px;padding:10px;font-size:15px;box-shadow:none;background:#ecf1f4;background:linear-gradient(to bottom,#000 0,#0b2340,#17202b 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ecf1f4',endColorstr='#becad9',GradientType=0);-webkit-transform:rotateX(-90deg) translateZ(50px);-moz-transform:rotateX(-90deg) translateZ(50px);-ms-transform:rotateX(-90deg) translateZ(50px);-o-transform:rotateX(-90deg) translateZ(50px);transform:rotateX(-90deg) translateZ(50px);-webkit-transition:all .6s;-moz-transition:all .6s;-ms-transition:all .6s;-o-transition:all .6s;transition:all .6s}.information strong{display:block;margin:.2em 0 .5em 0;font-size:16px;font-family:"Oleo Script"}
3

Добавить комментарий

Войти с помощью: 
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
*
Войти с помощью: 
Генерация пароля