CSS3 中间弯折的3D书页

背景渐变参考：http://uigradients.com/

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200,600,700,900);
body {
    background: -webkit-linear-gradient(0deg, #e6dada 10%, #274046 90%);
    /* W3C */
    
    background: linear-gradient(90deg, #e6dada 10%, #274046 90%);
    font-family: 'Source Sans Pro', sans-serif;
    text-rendering: optimizeLegibility;
}
div.holder {
    height: 600px;
    left: 50%;
    opacity: 0.8;
    -webkit-perspective: 1500;
    perspective: 1500;
    position: absolute;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, -200px);
    transform: translate3d(-50%, -50%, -200px);
    width: 400px;
}
div.holder > div {
    color: #7a7a7a;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 1.5s ease-in;
    transition: all 1.5s ease-in;
    width: 100%;
}
div.holder > div p {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 2em;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 1.5s ease-in;
    transition: all 1.5s ease-in;
}
div.holder div.left {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #e5e5e5;
    text-align: right;
    z-index: 10;
}
div.holder div.left p {
    right: 20px;
}
div.holder div.right {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #e5e5e5;
    -webkit-transform: rotateY(90deg) translate3d(200px, 0, 200px);
    transform: rotateY(90deg) translate3d(200px, 0, 200px);
    z-index: 5;
}
div.holder div.right p {
    left: 20px;
}
div.change div.left {
    background: #bfbfbf;
    -webkit-transform: rotateY(-45deg) translateX(-200px);
    transform: rotateY(-45deg) translateX(-200px);
}
div.change div.left p {
    color: #676767;
}
div.change div.right {
    background: #fff;
    -webkit-transform: rotateY(45deg) translateX(200px);
    transform: rotateY(45deg) translateX(200px);
}
div.change div.right p {
    color: #8d8d8d;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #fff;
}
div.toggle {
    bottom: 60px;
    left: 50%;
    opacity: 0.8;
    position: absolute;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
div.toggle a {
    background: #545454;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-weight: 200;
    font-size: 18px;
    padding: 6px 40px 7px;
    text-decoration: none;
    letter-spacing: 0.025em;
}
div.toggle a:hover {
    background: #141414;
}

HTML

<div class="holder change4">
    <div class="left">
        <p>
            Art is pointless
            <br> you have to go out
            <br> get an actual job
            <br> and make a living
            <br> you can't just let
            <br> the rest of your life
            <br> be a joke, a failure.
            <br> you will end up
            <br> a starving artist.
            <br> contribute to society
            <br> instead of wasting time
            <br> you’re worthless.
            <br> &nbsp;
        </p>
    </div>
    <div class="right">
        <p>
            without passion.
            <br> and create art.
            <br> doing what you love
            <br> by being yourself.
            <br> other people define
            <br> and say you will
            <br> follow your heart.
            <br> happy and free, not
            <br> love your art and
            <br> by inspiring people
            <br> letting others tell you
            <br> you can change the world
            <br> &nbsp;
        </p>
    </div>
</div>

<div class="toggle">
    <a href="#">Change perspective</a>
</div>

背景渐变参考：http://uigradients.com/

编辑器支持Emmet

快捷键

背景渐变参考：http://uigradients.com/

CSS3 发送留言的动效页面的UI模板

CSS3+JS 通过JS来控制CSS变量实现3D视差效果的按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：