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

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

报告相同问题？

  • 关于前端3d透视的问题 css3 前端
    2023-02-25 13:30
    回答 2 已采纳 该回答内容部分引用GPT，GPT_Pro更好的解决问题CSS3的3D透视，要通过设置父盒子的perspective属性来实现，而不是当前盒子上。这是因为，当一个元素被设置为3D空间时，该元素所有的子元
  • css3 3d样式调节 3d css3 前端
    2022-02-28 14:02
    回答 2 已采纳 transform: rotate这个是旋转，有三个轴（x,y,z），你研究一下看能否实现你的要的效果吧。如果还是不行，可以试试这个（perspective）https://www.w3school.
  • 关于CSS卡片布局的问题 css css3 前端
    2022-04-01 23:35
    回答 2 已采纳 宽度给百分比就可以了
  • CSS3 3D骰子多角度翻转特效
    2021-07-24 23:45
    本主题将深入探讨“CSS3 3D骰子多角度翻转特效”，这是一种利用CSS3的强大功能创建的互动元素，用户可以通过点击来控制骰子的3D翻转，展示不同的面。 首先，我们来看CSS3中的3D变换。3D变换允许元素在三维空间中...
  • css写两面翻转遇见的问题 css css3 html5
    2022-11-23 19:51
    回答 2 已采纳 大概就是上面的样子 body { transform-style: preserve-3d; perspective: 500px; } .box {
  • css3 写不出3d效果怎么办 css3 html5
    2022-01-18 21:55
    回答 3 已采纳 鼠标经过3d翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
  • 关于前端css的设置问题 css html
    2023-01-05 10:19
    回答 2 已采纳 你如果只用css实现的话，划过的时候给个背景图不就行了
  • 简单几步用纯CSS3实现3D翻转效果
    2020-09-22 10:48
    本文将介绍如何使用纯CSS3来实现一个简单的3D翻转效果，这一技术对页面的交互性提升极为显著。 首先，我们需要了解两个重要的CSS属性：`transition`和`transform`。`transition`属性允许我们定义元素从一种样式平滑...
  • Css3文字渐变样式问题 css css3 前端
    2022-12-13 00:08
    回答 1 已采纳 自2017年以来，WebKit Bugzilla上有一个尚未解决的公开问题：background-clip:text不适用于display:flex。苹果已经忽视这个错误4年了，它可能永远不会被解决。
  • css3里3d动画用的多么 css3
    2019-06-15 19:47
    回答 2 已采纳 看你做什么类型的网站，做企业管理，根本用不到，做购物网站，商品展示用一用。做游戏网站，就要大量用。
  • 关于 CSS 中 left 的问题 css html5 前端
    2022-05-28 10:38
    回答 2 已采纳 在父类a标签加position：relative
  • css3实现3D立体翻转导航特效
    2020-06-05 20:46
    3. **3D翻转**：为每个导航项添加`transition`属性，定义翻转动画的速度。当鼠标悬停在导航项上时，使用`transform`属性实现3D翻转，如`transform: rotateX(90deg);`。 4. **背面样式**：利用伪元素`::before`或`::...
  • 纯CSS实现菜单、导航栏的3D翻转动画效果
    2020-09-25 03:39
    标签“CSS 3D翻转效果 动画”强调了本次讨论的重点，即利用CSS3的3D变换来实现翻转效果，并且这种效果是动态的，具有动画性质。 部分内容展示了实现3D翻转菜单的具体HTML和CSS代码。HTML部分主要由一个无序列表（`...
  • CSS实现3D翻转卡牌效果
    2024-06-13 15:12
    宇珩前端记录的博客 这是一个简单的翻牌效果，通过 HTML 和 CSS 实现。
  • css3 3d信封翻转效果.zip
    2022-11-16 21:21
    本主题关注的是“css3 3d信封翻转效果”，这是一个利用CSS3的3D转换来创建动态、交互式的视觉效果，通常用于增强用户界面的吸引力。此效果模拟了现实生活中信封打开或关闭时的翻转动作，为网页增添了一种立体感和...
  • 没有解决我的问题, 去提问