Cube css3使用Impress js

时间:2012-12-30 18:23:07

标签: css impress.js

基于此处的演示 https://github.com/bartaz/impress.js

我试过从立方体的正面移动到顶部但我无法旋转到其他面孔.. 目的是在立方体的所有六个面上都有一些内容,按下空格键我应该可以切换到每个面

我的html代码适用于两个面如下

<!doctype html>

<html lang="en">
<head>
<link type ="text/css" href="css/customstyle.css" rel="stylesheet" />
</head>

<body> 
    <div id="impress">

    <div id="step-1" class="step slide" data-x="200" data-y="200">
        <p>
            <span class="text1">A</span> 
            <span class="text2">B</span>
            <span class="text3">C</span>

        </p>

     </div>

<div id="step-2" class="step slide"  data-x="100" data-y="145"  data-z="-1000" data-rotate-x="180" data-scale="1" >

  <p>
        Face 2 :) </p> </div>

1 个答案:

答案 0 :(得分:0)

我在等人回答。

一个非常耗时的选项是将文字放在图像上。图像将有各种色调和1种颜色的色调以产生3d效果。使用z-index将文字放在图像上方。

另一个选择是直接联系开发人员。我猜他可以在Github上访问。也许他会有更好,更简单,更短的方法来实现所需的