_眉目如初
2019-06-03 10:59
采纳率: 100%
浏览 473
已采纳

关于Css3 3d翻转的问题

http://aswsol.wan.360.cn/
图片说明
这个3D翻转效果怎么做的,css3 translate3d(0,140px,0) 配合rotateX 和他一点都不一样。。萌新初来驾到===求解答鸭~~

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 张兴华(MarsXH.Chang) 2019-06-03 15:59
    已采纳

    我特意去写了个demo,你看下,
    重点属性 有注释。

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>3D盒子旋转Demo</title>
        <style>
            .rotate-box {
                height: 137px;
                width: 286px;
                overflow: hidden; /* 隐藏翻转上去和翻转下去的图片 */
            }
            .rotate-inner {
                transition: all .4s ease;
                perspective: 428px; /* 重点属性,定义 3D 元素距视图的距离,有他才有3D效果 */
                -webkit-perspective: 428px;
            }
            .rotate-inner .top-block,
            .rotate-inner .bottom-block {
                backface-visibility: hidden; /* 辅助属性-属性定义当元素不面向屏幕时是否可见,如果在旋转元素不希望看到其背面时,该属性很有用 */
                transition: all .4s ease;
                -webkit-backface-visibility: hidden;
                -webkit-transition: all .4s ease;
                width: 286px;
                height: 137px;
            }
            .rotate-inner .top-block {
                transform-origin: bottom; /* 旋转轴线位置 */
                -webkit-transform-origin: bottom;
                transform: rotateX(0deg); /* 默认旋转角度 */
                -webkit-transform: rotateX(0deg);
            }
            .rotate-inner .bottom-block {
                transform-origin: top; /* 旋转轴线位置 */
                -webkit-transform-origin: top;
                transform: rotateX(-90deg);
                -webkit-transform: rotateX(-90deg);
                background: url(http://p0.qhimg.com/d/inn/72e0645c64f3/theme/images/yxzlhover.png) no-repeat;
            }
            .rotate-box:hover .rotate-inner {
                margin-top: -137px; /* 旋转后上移,把下面的block显示,上面的隐藏 */
            }
            .rotate-box:hover .rotate-inner .top-block {
                transform: rotateX(90deg); /* 旋转后角度 */
                -webkit-transform: rotateX(90deg);
            }
            .rotate-box:hover .rotate-inner .bottom-block {
                transform: rotateX(0);
                -webkit-transform: rotateX(0);
            }
        </style>
    </head>
    <body>
        <div class="rotate-box">
            <div class="rotate-inner">
                <img class="top-block" src="http://p5.yx-s.com/d/inn/72e0645c64f3/theme/images/yxzl2.png">
                <div class="bottom-block"></div>
            </div>
        </div>
    </body>
    </html>
    
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题