| Kosten | Суббота, 23 Мая 2020 | Сообщение 1 |
| Здесь представлено два варианта 3D куба, которые отлично подойдет на современный дизайн сайта. Так как при клике навигации, что идет выше, вы самостоятельно можете управлять всеми сторонами, это в тот момент, если вам нужно показать именно ту сторону, что будет впереди. Где дополнительный стиль добавляется в демонстрационную версию, а преобразование применяется при наведении, чтобы просмотреть всех граней куба.
HTML
Код <div class="wrapper"> <input type="radio" name="rotate-switches" id="rotate" checked class="rotate"> <label for="rotate" class="rotate-label">Auto</label> <input type="radio" name="rotate-switches" id="front" class="rotate"> <label for="front" class="rotate-label">Front</label> <input type="radio" name="rotate-switches" id="left" class="rotate"> <label for="left" class="rotate-label">Left</label> <input type="radio" name="rotate-switches" id="back" class="rotate"> <label for="back" class="rotate-label">Back</label> <input type="radio" name="rotate-switches" id="right" class="rotate"> <label for="right" class="rotate-label">Right</label> <input type="radio" name="rotate-switches" id="top" class="rotate"> <label for="top" class="rotate-label">Top</label> <input type="radio" name="rotate-switches" id="bottom" class="rotate"> <label for="bottom" class="rotate-label">Bottom</label> <div class="perspective"> <div class="cube"> <div class="front"> <img src="Ссылка на изображение"> </div> <div class="back"> <img src="Ссылка на изображение"> </div> <div class="top"> <img src="Ссылка на изображение"> </div> <div class="bottom"> <img src="Ссылка на изображение"> </div> <div class="left"> <img src="Ссылка на изображение"> </div> <div class="right"> <img src="Ссылка на изображение"> </div> </div> </div> </div>
CSS
Код .wrapper {
max-width: 50rem;
width: 100%;
margin: 1rem auto;
text-align: center;
z-index: -1;
}
.rotate {
display: none;
}
.rotate-label {
display: inline-block;
margin-left: 0.5rem;
background: #2980b9;
color: #fff;
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
transition: all 0.25s;
}
.rotate:checked + .rotate-label {
background: #3498db;
}
.perspective {
position: relative;
z-index: -1;
perspective: 2000px;
perspective-origin: 25rem -150px;
}
.cube {
position: relative;
width: 400px;
margin: 3.5rem auto;
transform-style: preserve-3d;
transition: all 0.5s;
}
.cube div {
position: absolute;
width: 400px;
height: 400px;
opacity: 0.95;
}
.cube img {
max-height: 100%;
max-width: 100%;
}
#rotate:checked ~ .perspective > .cube {
animation: rotate 10s infinite linear;
}
#front:checked ~ .perspective > .cube {
transform: rotateX(0deg) rotateY(0deg);
animation: none;
}
#left:checked ~ .perspective > .cube {
transform: rotateX(0deg) rotateY(90deg);
animation: none;
}
#back:checked ~ .perspective > .cube {
transform: rotateX(0deg) rotateY(180deg);
animation: none;
}
#right:checked ~ .perspective > .cube {
transform: rotateX(0deg) rotateY(270deg);
animation: none;
}
#top:checked ~ .perspective > .cube {
transform: rotateX(-90deg) rotateY(0) translateZ(200px) translateY(-200px);
animation: none;
}
#bottom:checked ~ .perspective > .cube {
transform: rotateX(90deg) rotateY(0) translateZ(-200px) translateY(-200px);
animation: none;
}
.front {
transform: translateZ(200px);
}
.back {
transform: translateZ(-200px) rotateY(180deg);
}
.left {
transform: rotateY(270deg) translateX(-200px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(200px);
transform-origin: top right;
}
.top {
transform: rotateX(90deg) translateY(-200px);
transform-origin: top center;
}
.bottom {
transform: rotateX(-90deg) translateY(200px);
transform-origin: bottom center;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
При наведении курсора он вращается между моей картинкой и ссылкой на сайт. При этом я подумал, почему бы не расширить идею в полный куб, который можно использовать в качестве галереи изображений.
Демонстрация
Анимированный 3D куб с навигацией при наведение курсора
HTML
Код <div class="container"> <div class="box"> <div class="side_top"> <div class="cover_top"></div> <div class="cover_right"></div> <div class="cover_bottom"></div> <div class="cover_left"></div> </div> <div class="side_right"> <span class="marquee_right"> <span class="text_right">3D BOX MENU</span> </span> </div> <div class="side_front"> <span class="marquee_front"> <span class="text_front">3D BOX MENU</span> </span> </div> <div class="side_back"></div> <div class="side_bottom"></div> <div class="side_left"></div> <div class="nav"> <span class="menu"></span> <span class="menu"></span> <span class="menu"></span> <span class="menu"></span> </div> </div> </div>
CSS
Код .container{
width:200px;
height:200px;
top:50%;
left:50%;
perspective:100%;
transform:translate(-50%,-50%)
}
.box{
width:100px;
height:100px;
bottom:25px;
left:50px;
cursor:pointer;
transform-style:preserve-3d;
transform:rotateY(-45deg) rotateX(-15deg) rotate(15deg)
}
.box [class*="side_"]{width:100%;height:100%}
.box [class*="side_"]:not(.side_top),
.side_top div
{background:linear-gradient(90deg,#d31027,#ea384d)}
.side_top
{transform-style:preserve-3d;transform:rotateX(90deg) translate3d(0,0,50px)}
.side_right{transform:rotateY(90deg) translate3d(0,0,50px)}
.side_front{transform:translate3d(0,0,50px)}
.side_back{transform:rotateY(180deg) translate3d(0,0,50px)}
.side_bottom{transform:rotateX(-90deg) translate3d(0,0,50px)}
.side_left{transform:rotateY(-90deg) translate3d(0,0,50px)}
.cover_top{
width:100px;
height:50px;
top:0;
z-index:1;
transition:all .2s 1.4s ease;
transform:rotateX(0deg);
transform-origin:center top
}
.cover_right{
width:50px;
height:100px;
right:0;
transition:all .2s 1.2s ease;
transform:rotateY(0deg);
transform-origin:center right
}
.cover_bottom{
width:100px;
height:50px;
bottom:0;
z-index:1;
transition:all .2s 1s ease;
transform:rotateX(0deg);
transform-origin:center bottom
}
.cover_left{
width:50px;
height:100px;
left:0;
transition:all .2s .8s ease;
transform:rotateY(0deg);
transform-origin:center left
}
[class*="marquee"]{
width:105px;
height:50%;
top:50%;
overflow:hidden;
white-space:nowrap
}
.marquee_right
{left:0;transform-origin:left;transform:perspective(1000px) rotateY(15deg) translate(0,-50%)}
.marquee_front
{right:0;transform-origin:right;transform:perspective(1000px) rotateY(-15deg) translate(0,-50%)}
[class*="text"]
{right:-150%;font-size:20px;line-height:2.5}
.text_right
{color:#fff;text-shadow:1px 1px #000;animation:marquee 5s linear infinite}
.text_front
{color:#000;text-shadow:1px 1px #fff;animation:marquee 5s 1.7s linear infinite}
@keyframes marquee
{from{right:-150%}to{right:150%}}
.side_front:before,
.cover_top:before,
.cover_bottom:before{
background-color:transparent;
background-image:
linear-gradient(90deg,#fd3352 100%,rgba(0,0,0,0)),
linear-gradient(90deg,#ffc93b 100%,rgba(0,0,0,0)),
linear-gradient(90deg,#63c486 100%,rgba(0,0,0,0)),
linear-gradient(90deg,#4690ff 100%,rgba(0,0,0,0));
background-position:5px top,10px top,15px top,20px top;
background-repeat:no-repeat;
background-size:5px 100%;
width:100%;
height:100%;
display:block;
position:absolute;
content:""
}
.nav
{width:100%;height:100%;transform:rotateY(45deg) rotateX(15deg) rotate(-75deg)}
.menu{
width:32px;
height:100%;
top:-60px;
left:70px;
transform-origin:bottom center
}
.menu:nth-child(1){transform:rotate(30deg)}
.menu:nth-child(2){transform:rotate(60deg)}
.menu:nth-child(3){transform:rotate(90deg)}
.menu:nth-child(4){transform:rotate(120deg)}
.menu:before{
width:32px;
height:32px;
top:100%;
display:block;
position:absolute;
content:"";
border-radius:50%
}
.menu:nth-child(1):before{background:url('https://image.flaticon.com/icons/svg/185/185981.svg');transition:all .2s .6s ease}
.menu:nth-child(2):before{background:url('https://image.flaticon.com/icons/svg/185/185961.svg');transition:all .2s .4s ease}
.menu:nth-child(3):before{background:url('https://image.flaticon.com/icons/svg/185/185985.svg');transition:all .2s .2s ease}
.menu:nth-child(4):before{background:url('https://image.flaticon.com/icons/svg/185/185988.svg');transition:all .2s ease}
.box:hover .cover_top{transition:all .2s ease;transform:rotateX(180deg)}
.box:hover .cover_right{transition:all .2s .2s ease;transform:rotateY(180deg)}
.box:hover .cover_bottom{transition:all .2s .4s ease;transform:rotateX(-180deg)}
.box:hover .cover_left{transition:all .2s .6s ease;transform:rotateY(-180deg)}
.box:hover .menu:before{top:0}
.box:hover .menu:nth-child(1):before{transition:all .2s .8s ease}
.box:hover .menu:nth-child(2):before{transition:all .2s 1s ease}
.box:hover .menu:nth-child(3):before{transition:all .2s 1.2s ease}
.box:hover .menu:nth-child(4):before{transition:all .2s 1.4s ease}
Здесь В HTML-файле у нас есть родительский div с идентификатором оболочки и дочерний div с классом куба . И наконец, у нас есть шесть дочерних элементов div, которые представляют 6 фаз куба.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 29 Мая 2020 | Сообщение 2 |
|
| 3D куб CSS анимация
HTML
Код <html lang=" "> <head> <meta charset="utf-8"> <title>3dCube</title> <link rel="stylesheet" href="3dCube.css"> </head> <body> <div class="scene"> <div class="cube"> <div class="cube__face cube__face--front show-front"></div> <div class="cube__face cube__face--back show-back"></div> <div class="cube__face cube__face--right show-right"></div> <div class="cube__face cube__face--left show-left"></div> </div> </div> </body> </html>
CSS
Код .scene {
position: absolute;
width: 200px;
height: 200px;
perspective: 600px;
margin-left: calc(50% - 100px);
margin-top: 150px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 6s cubic-bezier(.64,.17,.46,.93) infinite;
}
@keyframes rotate {
0% { transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg); }
25% { transform: rotateY(90deg) rotateZ(15deg) rotateX(15deg); }
25% { transform: rotateY(90deg) rotateZ(15deg) rotateX(15deg); }
50% { transform: rotateY(180deg) rotateZ(0deg) rotateX(0deg); }
50% { transform: rotateY(180deg) rotateZ(0deg) rotateX(0deg); }
75% { transform: rotateY(270deg) rotateZ(15deg) rotateX(15deg); }
75% { transform: rotateY(270deg) rotateZ(15deg) rotateX(15deg); }
100%{ transform: rotateY(360deg) rotateZ(0deg) rotateX(0deg); }
}
.cube__face {
width: inherit;
height: inherit;
border: 5px solid #0f1a23;
position: absolute;
}
.cube__face--front {
background: rgba(233, 194, 30, 0.2) url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/599px-Instagram_icon.png) center / 50% no-repeat;
transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right {
background: rgba(248, 250, 251, 0.2) url(https://facebookbrand.com/wp-content/uploads/2018/08/thumb1.png?w=500&h=482) center / 50% no-repeat;
transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back {
background: rgba(255, 0, 0, .2) url(https://www.aretaeio.com/wp-content/uploads/2017/05/play-icon.png) center / 50% no-repeat;
transform: rotateY(180deg) translateZ(100px); }
.cube__face--left {
background: rgba(33, 150, 243, .2) url(https://cdn.worldvectorlogo.com/logos/twitter-4.svg) center / 50% no-repeat;
transform: rotateY(-90deg) translateZ(100px);
}
See the Pen
3D cube CSS animation by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 31 Мая 2020 | Сообщение 3 |
|
| Еще один интересный элемент, виде куба.
See the Pen
Particle Box by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
