Как создать 3D куб используя CSS.


 кубПриветствую всех на своём блоге. С помощью несложного кода CSS можно создать трёхмерный куб, не прибегая к JavaScript. Увидела это на блоге http://vagabundia.blogspot.com и сразу захотелось попробовать и поделиться с вами.



В статье эффекты CSS при оформлении сообщения  что-то подобное делали на плоскости.
Конкретного применения для этого варианта особо не представляю. В принципе, можно разместить любой текст, фото, ссылки. Красиво смотрится. Разметка достаточно простая. Грани имеют свой DIV класс с содержанием. Пробовала в разных браузерах.
первый день в садиккакой чудесный день
 укус комаразащита от комаров

Сначала понадобиться вот такой код HTML.
<div class="cube">
<div class="topFace">
<div>
... здесь картинка, текст, ссылки.
 </div>
</div>
<div class="leftFace">
...здесь картинка, текст, ссылки.
</div>
<div class="rightFace">
здесь картинка, текст, ссылки.
</div>
</div>

И сам код CSS.
<style>.cube {
height: 480px;
left: 100px;
position: relative;
top: 200px;
width: 600px;
}
.rightFace,.leftFace,.topFace div {
padding: 10px;
height: 180px;
width: 180px;
}
.rightFace,.leftFace,.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #9AB;
}
.rightFace {
-moz-transform: skewY(-30deg);
-webkit-transform: skewY(-30deg);
background-color: #89A;
left: 200px;
}
.topFace div {
-moz-transform: skewY(-30deg) scaleY(1.16);
-webkit-transform: skewY(-30deg) scaleY(1.16);
background-color: #ABC;
}
.topFace {
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
left: 100px;
top: -158px;
}</style>
Изображения я использовала размером height="140" и width="160". Меньшие смотрятся лучше. Более крупные, соответственно разметке, уходят за пределы граней. Если найдёте применение и захотите менять размеры всего куба в целом, будьте аккуратны, чтобы не исказить саму форму.

Оба кода вставляем в радакторе сообщений в режиме HTML в нужное место . Можно в гаджет HTML/JavaScript.

 И у меня сегодня всё. Хороших всем выходных. Спасибо, что заглядываете в мои шпаргалки.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


2 комментария:

  1. Добрый день! Как установить перелиновку в сообщении. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Ирина, я не совсем вопрос поняла. Возможно Вы имеете в виду ссылки на что-то..

      Удалить

Пользовательский поиск
Foto Saya
My Photo