javascript - CSS 旋转 Cube UI-6ren

javascript - CSS 旋转 Cube UI

转载作者：太空宇宙更新时间：2023-11-04 12:31:53

25

4

我正在尝试创建像立方体一样旋转的 3d 菜单 ui，我正在努力实现 3d 旋转效果。2 个元素在旋转，但我不知道如何显示 3d 立方体效果。任何关于如何让它像立方体一样旋转的建议

http://jsfiddle.net/dfw3vLag/

    <style>
    body
    {
      background: #333;
      font-family: sans-serif;
      color: #333333;
    }

    ul.list
    {
      list-style-type: none;
      margin: 50px auto;
      padding: 0;
      width: 300px;
    }

    ul.list li
    {
      position: relative;
      height: 40px;
      line-height: 40px;
      margin-bottom: 2px;
    }

    ul.list li div.front
    {
        position:absolute;
        transform: rotateX( 0deg );
        -webkit-transform-style: preserve-3d;
        z-index:2;
        transform-origin: top right;
        background:#FC0; 
        width:90%; 
        height:100%; 
        padding: 0 10px;
        backface-visibility: hidden;
        transition: transform 2s linear 0s;
    }

    ul.list li div.back
    {
        position:absolute;
        transform:  rotateY( -90deg );
        -webkit-transform-style: preserve-3d;
        z-index:1;
        transform-origin: top left;
        background:#FC0345; 
        width:90%; 
        height:100%; 
        padding: 0 10px;
        backface-visibility: hidden;
        transition: transform 2s linear 0s;
    }

    ul.list li:hover
    {
      cursor: pointer;
    }

    ul.list li:hover div.front
    {
      transform:  rotateY( 90deg );
    }
    ul.list li:hover div.back
    {
      transform:   rotateY( 0deg );
    }

    </style>


    <ul class="list">
      <li>
        <div class="back"></div>
        <div class="front">list A</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list B</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list C</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list D</div>
      </li>
    </ul>

最佳答案

不确定您期望它看起来像什么，但在 here 的帮助下，我能够将您的 fiddle 更新为 this .

li 本身在 hover 上旋转，而不是分别在 div.front 和 div.back 上旋转——它们'最初只是定位和旋转。

在 Chrome v39 上测试。

宽度和填充值导致旋转的脸有点偏离，所以我改变了它们。

body {
  background: #333;
  font-family: sans-serif;
  color: #333333;
}
ul.list {
  list-style-type: none;
  margin: 50px auto;
  padding: 0;
  width: 300px;
}
ul.list li {
  position: relative;
  height: 40px;
  line-height: 40px;
  margin-bottom: 2px;
  transition: transform 1s linear 0s;
  transform-style: preserve-3d;
  transform-origin: left left -145px;
}
ul.list li div.front {
  position: absolute;
  background: #FC0;
  width: 100%;
  height: 100%;
  /* padding: 0 10px; */
  transform: translateZ(145px);
  box-sizing: border-box;
}
ul.list li div.back {
  position: absolute;
  background: #FC0345;
  width: 100%;
  height: 100%;
  /* padding: 0 10px; */
  transform: rotateY(90deg) translateZ(-145px);
}
ul.list li:hover {
  cursor: pointer;
  transform: rotateY(90deg);
}

<body>
  <ul class="list">
    <li>
      <div class="back"></div>
      <div class="front">list A</div>
    </li>
    <li>
      <div class="back"></div>
      <div class="front">list B</div>
    </li>
  </ul>
</body>

关于javascript - CSS 旋转 Cube UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27583393/

25

4

0

文章推荐： c++ - 寻求对 constexpr 功能的澄清

文章推荐： java - 在fragment Activity中添加工具栏

文章推荐： c++ - 变量不能明确

algorithm - Cube on Cube 碰撞检测算法？
我试图找到最有效的方法来检查 2 个任意大小的立方体是否相互碰撞。立方体的边长不一定都相等(一个盒子是可能的)。鉴于这些限制，我如何有效地检查它们是否发生碰撞？ (每个盒子有24个顶点)谢谢它们是轴
olap-cube - 电信数据的 OLAP Cube 设计问题
背景:我正在分析通话详细记录 (CDR) 数据，以便根据通话时长、通话时间(节假日通话或非节假日通话、商务通话)对客户进行分割或非商务电话)、用户年龄组和性别。数据来自两个表名cdr(包括card_n
cube.js - 如何在 cube.js 模式的 sql 中传递动态值？
我想要 status=2 或 status3`, // ${SECURITY_CONTEXT.status.unsafeValue()`, }); 一般来说，最好不要这样做；相反，我建议使用 seg
java - org.olap4j.metadata.Cube 还是 mondrian.olap.Cube？
我正在开发一个olap Web应用程序，对于对象Cube我有2种类型的导入:org.olap4j.metadata.Cube或mondrian.olap.Cube。我应该使用什么？最佳答案您应该只
How to create a third person camera that follows a cube and rotates with the cube(如何创建跟随立方体并与立方体一起旋转的第三人称相机)
我要在Threejs中创建一个第三人称相机，它跟随一个立方体旋转，并在立方体旋转时旋转。这就是我所做的。它在下面的框中工作，但当框旋转时，它就不一样了。。所以请帮帮我。我试着自己创造它。我是这么做的
Cube.js 时间范围最佳实践
我有日期范围内的商品价格表。在 cube.js 中对此进行建模以允许时间维度查询(例如随时间变化的价格或商品的平均价格)的最佳方式是什么？谢谢! 表格看起来像: CREATE pricing tes
TFS Cube - 总代码行数显示不正确？
我正在使用 TFS 多维数据集 as documented here并且我得到了“总行数”的奇怪结果。如果我查看 Visual Studio 中的一个文件，我会看到一个文件可能有 42 行长(总计、注
rubiks-cube - 如何创建用于解决魔方的模式数据库？
我正在尝试实现Korf's algorithm来解决3x3x3魔方。解决方案的一部分是创建模式数据库。这是paper的引文，从字面上包含有关如何执行操作的全部信息: 用一个从目标状态进行广度优先搜
c - 将三维数组分割成更小的 "cubes"
我目前正在研究这个:我生成一个包含多个 .vtr 文件的 Paraview .vtm 文件。每个 .vtr 文件都包含值和坐标，如下所示，假设我正在处理 8 的维度:
Cube.js：试试这个新的数据分析开源工具
Cube.js 是一个开源的分析平台，可以作为数据源和应用之间的中间层。数据分析是一个时髦的领域，有许多解决方案可供选择。其中之一是 Cube.js，这是一个开源的分析平台。你可以
postgresql - postgres cube 欧氏距离查询性能问题
我有一个 postgres 数据库，其中包含一个包含 100 维词嵌入的文档表，并使用它来查找相似文档。 CREATE TABLE documents( id bigint, title
SSAS Cube 重新处理失败 - 如果我再试一次就会成功
所以我对 BI 的概念基本上是全新的，并且我继承了一个现有的 ETL 过程，它是一个两步过程: 将数据加载到仅由多维数据集处理使用的数据库中针对所述数据库启动 SSAS 多维数据集处理它看起来很好
cube.js playground 没有正确绘制数据
我正在使用 cube.js 通过将其绘制为折线图来比较数据随时间的变化。第一步:成功生成 cube.js schema 后，数据如下所示: 第 2 步: 现在，当我尝试检查折线图时，它显示的线条如下
olap-cube - 无法建立连接。确保服务器正在运行
当我在创建数据源 View 后尝试处理维度时，出现错误: The project could not be deployed to the server because of the followin
javascript - Cube.js 后端错误继续等待问题
我在连接到 AWS 无服务器上的 cube.js 后端并在前端仪表板中执行/cubejs-api/v1/load 请求时遇到了一些问题。我一直收到 {"error":"Continue wait"}
sql - OLAP Cube 部署问题
我对此很陌生，所以我可能犯了一个简单的错误。我需要使用远程数据库制作一个 OLAP 多维数据集。设置维度和度量并创建多维数据集后，我无法将多维数据集启动到本地服务器。我不断收到错误， “由于以下
dynamic - 可以将任何维度动态添加到 SSAS CUBE
我们构建了一个 SSAS ROLAP 多维数据集，其中数据源是 memSQL。该多维数据集使用 Visual Studio 2019 构建，用于连接 memSQL 数据源的驱动程序为“MySQL .N
function - 为什么我的Scheme Cube-Root程序中出现此错误？
因此，我正在通过SICP进行工作，其中一个问题(1.8)是使用Newton-Raphson method实现类似于平方根过程的立方根过程。我编写了程序并尝试执行该程序，但出现了以下错误:*: numb
cube.js - 生成架构并单击构建后出现以下错误，这可能是由于表名称中包含下划线和破折号造成的吗？
编译架构: {"version":"default_schema_version_78dca52738894dbb23e7069f2e88ae73"} Internal Server Error: {
cube.js - 生成架构并单击构建后出现以下错误，这可能是由于表名称中包含下划线和破折号造成的吗？
编译架构: {"version":"default_schema_version_78dca52738894dbb23e7069f2e88ae73"} Internal Server Error: {

首页

博学

6Ren·AI

商城

javascript - CSS 旋转 Cube UI