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

关于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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)