美文网首页
CSS 3D 动效

CSS 3D 动效

作者: 将军肚 | 来源:发表于2018-05-17 19:47 被阅读0次
<div id="stage" v-show="box.isShow">
            <div id="box"
                 :class="{
                    'faceA': isFaceA,
                    'faceB': isFaceB,
                    'faceC': isFaceC,
                }"
            >
                <div id="A"></div>
                <div id="B"></div>
                <div id="B"></div>
            </div>
</div>
#stage{
        position: fixed;
        z-index: 1;
        width: 620px;
        min-height: 620px;
        margin-left: -310px;
        left: 50%;
        top:50%;
        perspective: 800px;
        perspective-origin: 50% 10%;
        span{
            padding: 20px;
        }

    }
    #box{

        transform-style: preserve-3d;
        transition: transform 1s;//运动时间
        transform:translateZ(-179px) rotateY(0);

        &.faceA{transform:translateZ(-179px) rotateY(0);}
        &.faceB{transform:translateZ(-179px) rotateY(-120deg);}
        &.faceC{transform:translateZ(-179px) rotateY(-240deg);}

        & > div{
            width: 620px;
            position:absolute;
            backface-visibility: hidden;
        }
        #A{
            transform: rotateY( 0deg ) translateZ(179px);

        }
        #B{
            transform: rotateY( 120deg ) translateZ(179px);
        }
        #C{
            transform: rotateY( 240deg ) translateZ(179px);

        }
    }
image.png
let r = 64 / Math.tan(20 / 180 * Math.PI)

相关文章

  • CSS 3D 动效

  • 3D动效日期时间变化

    日期时间变化时出现翻转的3D立体动效 HTML CSS: JS: 1、 首先是iscroll的实例化方式 2、添...

  • 值得收藏的CSS库

    Single Element CSS Spinners CSS3加载动效,经常会需要一些动效来表达系统处于加载或处...

  • css简单动效

    简单的css3动效 直接上代码 摆钟 景色动效 相册 模拟ios手机相册吸附效果

  • css动效相关

    Duration and easing - Motion - Google design guidelines (...

  • 动效篇(3)--CSS极简动效鉴赏与制作

    (一)牛人动效 (二)动效制作与详解(详解见代码块中的注释!!!) 1.搭建基本形状 HTML CSS 2.加入动...

  • CSS动画

    过渡 transition 属性 示例 参考: 动效落地方法 优秀的 CSS 交互动效示例 支持:nternet ...

  • 动效解决方案 Animate.css

    一、 Animate.css 是一个跨浏览器的动效基础库,是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动...

  • CSS 推荐

    30 秒 CSS(一些 CSS 代码片段) cssfx(一些 css 动效代码片段) Box Shadow Gen...

  • 好玩的CSS动效~

    Loading动画-01 Loading动画-02 蚀刻文本 渐变字 悬停下划线动画 鼠标光标梯度跟踪 溢出滚动渐...

网友评论

      本文标题:CSS 3D 动效

      本文链接:https://www.haomeiwen.com/subject/lpeidftx.html