PHP
HTML
CSS
MONEY
Здравствуйте уважаемые начинающие веб-мастера. Продолжаем знакомство с Оригинальными эффектами CSS.
Хотите такой кубик на свой сайт? Нет ничего проще, так как написан он на html и css, без скриптов и библиотек.
А если Вы хоть немного знаете html и css, самые основы, то вам не составит большого труда изменить его размер, вставить в грани куба свои записи, задать им любой цвет, или поэкспериментировать с фоновыми изображениями.
Ещё можно «закрутить» его по вертикали, сделать грани круглыми или эллипсными, и как угодно изменить скорость вращения.
Ну об этом можно и в комментариях, а пока вот код этого кубика. После объясню, как его вставить на страницу сайта на WP.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.wrap {
-webkit-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
float: left;
margin-right: 100px;
}
.cube {
position: relative;
margin: 20px;
width: 70px;
height: 70px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
padding: 5px 3px;
color: #1F0405;
font-size: 16px;
text-align: center;
line-height: 70px;
border-radius: 4px;
box-shadow: inset 0 0 0 2px #705E5F;
}
.front {
-webkit-transform: translateZ(38px);
-ms-transform: translateZ(38px);
transform: translateZ(38px);
background: #fff;
}
.back {
-webkit-transform: translateZ(-38px) rotateY(-180deg);
-ms-transform: translateZ(-38px) rotateY(-180deg);
transform: translateZ(-38px) rotateY(-180deg);
background: #fff;
}
.left {
-webkit-transform: translateX(-38px) rotateY(-90deg);
-ms-transform: translateX(-38px) rotateY(-90deg);
transform: translateX(-38px) rotateY(-90deg);
background: #fff;
}
.rght {
-webkit-transform: translateX(38px) rotateY(90deg);
-ms-transform: translateX(38px) rotateY(90deg);
transform: translateX(38px) rotateY(90deg);
background: #fff;
}
.rotate-y {
-webkit-animation: spinY 10s infinite linear;
-ms-animation: spinY 10s infinite linear;
animation: spinY 10s infinite linear;
}
@-webkit-keyframes spinY {
from {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spinY {
from {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div class="cube">
<div id="cube" class="cube rotate-y">
<p class="face back">PHP</p>
<p class="face front">HTML</p>
<p class="face left">CSS</p>
<p class="face rght">MOUNY</p>
</div>
</div>
</div>
</body>
</html>Вот теперь вставляйте этот код в Notepad++, и экспериментируйте с css. Если кто-то захочет закрутить куб по вертикали, то в стилях все Y нужно исправит на Х.
Теперь о том как вставить кубик на страницу сайта на WordPress.
Сначала внимательно читаем про шорткод, затем вставляем его в самый конец файла functions.php, а потом, уже в него вставляем выше приведённый код куба, от тега <style> до тега </body> включительно.
Остаётся вставить шорткод в контент, но об этом подробно рассказано в указанной статье.
Желаю творческих успехов.
Перемена
Вчера в автобусе наркоман в сумку залез, я сначала не заметила, потом сумку открываю – сидит.
Анимация СSS для начинающих
CSS перемещение, вращение, 3D
Плавающий блок CSS
Часы CSS
Текст появляющийся на изображениях CSS
Живое сердце CSS
Блок перевёртыш CSS
Анимация для шапки сайта CSS
Логотип для сайта
Слайдер CSS
В раздел
Канительное это дело Света. Всё спланировано относительно друг друга, так что с ходу изменить размер не выйдет. Подбирается методом тыка. В .face свойства width и height, в .front .back .left и .rght свойства transform
Подскажите, как увеличить куб) пробую в .face, но идет смещение по углам
Попробуй из animation убрать infinite, и подобрать время исполнения анимации, чтобы на 4-ой грани заканчивалось. Только один нюанс после выполнения анимации элемент встанет в исходное положение т.е. на первую грань.
Если надо чтоб замерло именно на 4-ой грани, то можно поэкспериментировать с % выполнения. То есть задать время выполнения побольше, допустим секунд 180, а потом тормознуть на 10 или 20% и оставить до 100%. Тогда начальное положение кубик займёт только через 3 минуты, а до того будет светить четвёртой гранью.
Короче поэкспериментируй, я не пробовал. Вот тут, во второй части почитай про то, как проценты выполнения анимации задавать.
В общем, вот так, процентами можно задать любое положение
Картинки можно. Визуально прикольно будет. Только надо учесть что 4 картинки рядышком — солидный вес, тяжеловат элемент получится. На скорости загрузки скажется.
По картинки можно вставить указав вместо цвета фона background: #fff;
путь к файлу с изображением background-image: url(images/bg.jpg);
Как прекратить вращение такого изображение. Например на четвертой грани кубика
Анимация — это уже творчество Максим, где нет чётко заданных критериев. Я вот бывает сутками сижу, чтоб довести картинку. Так что настраивайтесь на такую работу. Зато увлекательно очень.
Координаты вращения регулируются свойствами perspective-origin: 50% 50%; и perspective: 500px;. Попробуйте поиграть с ними. «Процент туда-процент сюда», и увидите как будет меняться вид и область вращения.
Сразу и не скажешь Нужно тщательно копать Но похоже в вашем случае что-то в пути к картинке. Именно в таких случаях обычно отображаются значки.
Попробовал задать вращение по вертикали. Вроде все нормально сделал: поменял rotateY на rotateХ, где надо поставил или убрал минус перед числом пикселей или градусов, чтобы нормально грани отображались. Но куб почему то вращается вокруг сдвинутой оси.
Это можно заметить, если посмотреть на расстояние от края браузера до грани куба. При горизонтальном вращении это расстояние меняется нормально в зависимости от того повернут куб одной гранью (макс.расстояние ) или ребром 2 граней (мин.расстояние). А при вертикальном — видно, что он «плавает», то есть не только вращается, а и перемещается слегка вверх-вниз. Значит ось вращения не в центре грани, а сдвинута.
Не могли бы Вы помочь с корректировкой оси? Что надо подправить? Если надо могу скинуть код.
Вставил картинки, как .
Отображаются в виде маленьких значков картинок на гранях.
Что не так?
Я думаю что через шорткод на всех шаблонах будет работать. У меня на Секретах и нюансах тоже крутит нормально, хотя шаблон в принципе здорово отличается.
С картинками никаких проблем. И через css как background-image вставляются, и через html тегом <img>. Вот только с IE я ещё не доработал. Хоть и прописал перфиксы для него, но почему-то в Explorer 10, у меня, получается не кубик, а квадрат. Правда вертится гранями, но не в форме куба. В остальных браузерах нармально.
Здорово! Не знаю, вставиться ли такой кубик у меня на сайте, но он мне очень пригодился бы. А картинки в него можно вставить?