纯CSS实现的在线电子杂志3D展开动画

3D Magazine flip preview in CSS，适用于在线书籍阅读和电商（如当当网）。

html5, book

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2749
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.cube {
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform-style: preserve-3D;
    transform-style: preserve-3D;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 180px;
    height: 280px;
    -webkit-transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    top: 10px;
    -webkit-transform: rotateY(0deg) rotateX(40deg) rotateZ(-20deg) scale(1);
    transform: rotateY(0deg) rotateX(40deg) rotateZ(-20deg) scale(1);
}
.cube_inner {
    width: 210px;
    height: 280px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.cube_inner div {
    position: absolute;
    width: 210px;
    height: 280px;
    background: #FF2BA2;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.cube_inner div.cube_front {
    -webkit-transform-origin: 1px 0px;
    transform-origin: 1px 0px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(6px);
    transform: translateZ(6px);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    background: url("/uploads/1703/magazine_cover2.jpg");
    background-size: cover !important;
}
.cube_inner div.page_left {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
    -webkit-transform-origin: 1px 0px;
    transform-origin: 1px 0px;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), -webkit-transform 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    -webkit-transform: translateZ(5px -1);
    transform: translateZ(5px -1);
    background: url("/uploads/1703/magazine_left2.jpg");
    background-size: cover !important;
}
.cube_inner div.page_right {
    -webkit-transform: translateZ(4px);
    transform: translateZ(4px);
    background: url("/uploads/1703/magazine_right2.jpg");
    background-size: cover !important;
}
.cube_inner div.cube_back {
    -webkit-transform: translateZ(-5px);
    transform: translateZ(-5px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
}
.cube_inner div.cube_left {
    width: 10px;
    -webkit-transform: rotateY(90deg) translateZ(-5px);
    transform: rotateY(90deg) translateZ(-5px);
    background-color: #062738;
}
.cube_inner div.cube_right {
    width: 10px;
    -webkit-transform: rotateY(90deg) translateZ(205px);
    transform: rotateY(90deg) translateZ(205px);
    background-color: #d80079;
}
.cube_inner div.cube_top {
    height: 10px;
    -webkit-transform: rotateX(90deg) translateZ(5px);
    transform: rotateX(90deg) translateZ(5px);
    background-color: #b00063;
}
.cube_inner div.cube_bottom {
    height: 10px;
    -webkit-transform: rotateX(90deg) translateZ(-275px);
    transform: rotateX(90deg) translateZ(-275px);
    background-color: #fff;
}
hr {
    background: #09d4fb;
    width: 16px;
    float: left;
    height: 2px;
    border: none;
}
.box {
    background-image: url("/uploads/1702/wood-floor.jpg");
    background-size: cover;
    width: 500px;
    background-color: #e8cbb1;
    background-blend-mode: difference;
    height: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    -webkit-transition: width 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-color 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-position 0.6s 0.51s ease;
    transition: width 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-color 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), background-position 0.6s 0.51s ease;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.box:hover {
    width: 660px;
    background-position: -300px 0px;
}
.box:hover .cube {
    -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) translateY(50px) translateX(-220px);
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) translateY(50px) translateX(-220px);
}
.box:hover .cube .cube_front {
    -webkit-transform: translateZ(5px) rotatey(-179deg);
    transform: translateZ(5px) rotatey(-179deg);
}
.box:hover .cube .page_left {
    -webkit-transform: translateZ(5px) rotatey(-180deg);
    transform: translateZ(5px) rotatey(-180deg);
}
.box:hover .description {
    left: 426px;
    top: -10px;
    height: 160px;
    width: 200px;
}
.box:hover .pink {
    -webkit-transform: scale(1) rotate(-10deg);
    transform: scale(1) rotate(-10deg);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: all 0.7s 0.3s cubic-bezier(0.815, 0.005, 0.18, 1.005);
}
.box:hover .holder {
    width: 700px;
}
.box:hover .big {
    opacity: 1;
    top: 180px;
    left: 180px;
}
.box:hover .button {
    z-index: 3;
    bottom: 82px;
    left: 510px;
    background: #298aaf;
}
.box .pink {
    position: absolute;
    -webkit-transition: all 0.7s 0s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: all 0.7s 0s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    width: 80px;
    border-radius: 100px;
    height: 62px;
    z-index: 2;
    background: black;
    color: white;
    left: 160px;
    top: 22px;
    font-family: georgia;
    text-align: center;
    line-height: 20px;
    padding: 18px 0px 0px 0px;
    box-shadow: 0px 0px 0px black;
    -webkit-transform: scale(0) rotate(-80deg);
    transform: scale(0) rotate(-80deg);
}
.box .holder {
    -webkit-transition: all 1s .2s;
    transition: all 1s .2s;
    overflow: hidden;
    width: 500px;
    height: 400px;
    background: transparent;
    position: absolute;
}
.box .big {
    background: #47e1ff;
    padding: 20px;
    -webkit-transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    position: absolute;
    opacity: 1;
    z-index: 2;
    top: -136px;
    left: 90px;
    width: 370px;
}
.box .big hr {
    background: white;
}
.box .big h1 {
    font-family: georgia;
    font-size: 20px;
    margin: 0;
    font-weight: normal;
    color: #583447;
}
.box .big p {
    clear: left;
    margin: 0;
    font-size: 12px;
    font-family: georgia;
    opacity: 0.8;
    color: #583447;
}
.box .button {
    background: #09d4fb;
    position: absolute;
    bottom: 14px;
    cursor: pointer;
    -webkit-transition: bottom 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), left 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), box-shadow 1s, background-color 1s;
    transition: bottom 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), left 1s cubic-bezier(0.815, 0.005, 0.18, 1.005), box-shadow 1s, background-color 1s;
    z-index: 4;
    left: 360px;
    padding: 10px 24px;
    color: white;
    box-shadow: 0px 0px 0px #f31893;
    border-radius: 100px;
    font-family: georgia;
    font-size: 12px;
}
.box .description {
    -webkit-transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
    background: black;
    position: absolute;
    height: 86px;
    z-index: 1;
    top: 240px;
    width: 400px;
    color: white;
    left: 0px;
    padding: 22px;
}
.box .description h1 {
    font-family: georgia;
    font-weight: normal;
    margin: 0;
    font-size: 18px;
}
.box .description p {
    clear: left;
    font-family: georgia;
    margin: 0;
    font-weight: normal;
    font-size: 12px;
    opacity: 0.8;
}

HTML

<div class='box'>
    <div class='pink'>
        Latest edition
    </div>
    <div class='button'>
        Read now
    </div>
    <div class='holder'>
        <div class='big'>
            <h1>In this weeks edition</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae dui lobortis, rhoncus neque id, lacinia leo. Cras vitae tempus nulla, at lacinia metus.</p>
        </div>
    </div>
    <div class='description'>
        <h1>An awesome magazine for you</h1>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae dui lobortis, rhoncus neque id, lacinia leo. Cras vitae tempus nulla, at lacinia metus. Suspendisse urna lorem.</p>
    </div>
    <div class='cube'>
        <div class='cube_inner'>
            <div class='cube_front'></div>
            <div class='page_left'></div>
            <div class='page_right'></div>
            <div class='cube_back'></div>
            <div class='cube_left'></div>
            <div class='cube_right'></div>
            <div class='cube_top'></div>
            <div class='cube_bottom'></div>
        </div>
    </div>
</div>

3D Magazine flip preview in CSS，适用于在线书籍阅读和电商（如当当网）。

html5, book

编辑器支持Emmet

快捷键

3D Magazine flip preview in CSS，适用于在线书籍阅读和电商（如当当网）。

html5, book

使用CSS3实现的卡通动画电子书

纯CSS实现带翻滚展开指示符号动画的手风琴标签栏布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：