Мобильная версияПока ничего из этого не было сделано, у меня есть сетка с большим количеством шестиугольников, с некоторыми анимациями, они упорядочены по столбцам из 4 шестиугольных блоков, мы можем добавить строки в столбцы, или мы можем добавить столбцы со строками, но они не реагируют и не упорядочиваются самостоятельно.
Вот фрагмент упомянутого выше
Код: Выделить всё
body { background-color: #171d25; }
.container {
position: relative;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height: 500px;
-webkit-perspective: 700px;
perspective: 700px;
z-index: 10;
overflow: hidden;
}
.container .honeycomb {
display: block;
position: absolute;
margin-left: -465px;
padding-left: 18px;
left: 50%;
text-align: center;
height: 450px;
width: 930px;
-ms-transform: rotateX(45deg) rotateY(0deg);
-webkit-transform: rotateX(45deg) rotateY(0deg);
transform: rotateX(45deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-ms-transform-origin: center 65%;
-webkit-transform-origin: center 65%;
transform-origin: center 65%;
z-index: 5;
}
.container .honeycomb .column {
display: block;
float: left;
width: 62px;
}
.container .honeycomb .column:nth-child(odd) { margin-top: 36px; }
.container .honeycomb .hex {
display: block;
position: relative;
float: left;
margin: 0;
height: 72px;
width: 62px;
color: #fff;
cursor: pointer;
text-decoration: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
.container .honeycomb .hex:hover {
opacity: 1;
-ms-transform: translateZ(20px);
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.container .honeycomb .hex:hover .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
-webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
}
.container .honeycomb .hex .wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.container .honeycomb .hex .wrapper .color-1 { background: #ffbc06; }
.container .honeycomb .hex .wrapper .color-1:before { border-right-color: #ffbc06; }
.container .honeycomb .hex .wrapper .color-1:after { border-left-color: #ffbc06; }
.container .honeycomb .hex .content {
display: block;
position: absolute;
top: 0;
left: -80px;
text-align: center;
width: 200px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.3s ease-out 0.1s;
-o-transition: all 0.3s ease-out 0.1s;
-webkit-transition: all 0.3s ease-out;
-webkit-transition-delay: 0.1s;
-webkit-transition: all 0.3s ease-out 0.1s;
transition: all 0.3s ease-out 0.1s;
-ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
-webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
.container .honeycomb .hex .content strong {
display: block;
font: 600 26px/1.1 verdana, sans-serif;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.8);
}
.container .honeycomb .hex .content small {
display: block;
font: 15px/1.1 verdana, sans-serif;
}
.container .honeycomb .shadows {
display: block;
position: absolute;
top: -15%;
left: -15%;
height: 130%;
width: 130%;
background-image: -webkit-radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
background-image: radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
-ms-transform: translateZ(10px);
-webkit-transform: translateZ(10px);
transform: translateZ(10px);
pointer-events: none;
}
.hexagon {
display: block;
position: absolute;
width: 36px;
height: 62px;
background-color: #ffffff;
}
.hexagon:before,
.hexagon:after {
content: "";
position: relative;
float: left;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
}
.hexagon:before {
border-right: 18px solid #ffffff;
left: -18px;
}
.hexagon:after {
border-left: 18px solid #ffffff;
right: -18px;
}
.hidden { display: none; }Код: Выделить всё
3D Hexagon Grid Layout Demo
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
[b]CSSScript[/b] i'm a hexagon
Теперь, если бы мне нужна половина шестиугольников, я бы избавился от семи элементов div с классом 'column'... но шестигранники не будут расширяться и не центрироваться.
Вот попытка увеличить их и отобразить по центру. По сути, здесь было сделано больше квадрата, немного отрегулировано влево и вправо. значения, ничего твердого...
Кто-то сказал мне использовать запросы @media, но я не так много с ними работал... Что нужно, так это сделать сетку адаптивной, а также динамической, цель состоит в том, чтобы заставить ее работать с AngularJS с использованием ng-repeat, чтобы мы не знали количества параметров, и он упорядочит их, чтобы они выглядели красиво. Также хотелось бы знать, как сделать некоторые другие вещи, например, вставить изображение в середину шестнадцатеричного кода, отобразить изображение поверх имени шестнадцатеричного кода и, возможно, отобразить некоторую информацию с помощью анимации...
Подробнее здесь: https://stackoverflow.com/questions/315 ... -as-wanted
