HTML5 响应式面板

大屏幕显示平铺的面板，中等屏幕把面板两边区块折叠，小屏幕切换成竖向面板。

面板，响应式

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2365
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background: #47453b;
}
img {
    max-width: 100%;
}
.wrap {
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
@media (min-width: 450px) {
    .wrap {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        perspective: 300px;
    }
    .wrap:hover {
        perspective: 3000px;
    }
}
.pane {
    background: #bdbaa7;
    text-align: center;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    padding: 20px;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.pane h2 {
    font-weight: 300;
    letter-spacing: 3px;
    border-bottom: 1px solid #fff;
    margin: 0 0 0.6em;
}
.pane img {
    -moz-transition: all 0.13s linear;
    -o-transition: all 0.13s linear;
    -webkit-transition: all 0.13s linear;
    transition: all 0.13s linear;
    transform: scale(1);
}
@media (min-width: 450px) {
    .pane:hover img {
        transform: scale(1.05) translateY(-0.6em);
    }
}
.pane:first-child,
.pane:last-child {
    background: #ada992;
    transform-style: preserve-3d;
}
@media (min-width: 450px) {
    .pane:first-child {
        transform-origin: right top;
        transform: translateY(44px) rotateY(-11deg);
    }
    .pane:last-child {
        transform-origin: left top;
        transform: translateY(44px) rotateY(11deg);
    }
    .pane:nth-child(2) {
        transform: translateY(44px);
    }
}
@media (min-width: 800px) {
    .pane:first-child,
    .pane:last-child {
        transform: translateY(44px) rotateY(0deg);
    }
}

HTML

大屏幕显示平铺的面板，中等屏幕把面板两边区块折叠，小屏幕切换成竖向面板。

面板，响应式

编辑器支持Emmet

快捷键

大屏幕显示平铺的面板，中等屏幕把面板两边区块折叠，小屏幕切换成竖向面板。

面板，响应式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：