Cube css3 using Impress js

Question

based on the demo here https://github.com/bartaz/impress.js

i have tried moving from front face of the cube to the top but i am unable to rotate to the other faces.. the aim is to have some content on all the six sides of a cube and on pressing the space bar i should be able to toggle to each face

my html code which works for two face is as follows

<!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>

score 0 · Answer 1 · answered Jan 05 '13 at 04:48

I was waiting for someone to answer.

1 tough time consuming option is to put your text upon an image.The image would have various shades and tint of 1 color to give the 3d effect.Using z-index put your text above the image.

Another option,is to contact the developer directly.I guess he is reachable on Github.perhaps he would have better,simple,shorter ways to the required out

Cube css3 using Impress js

1 Answers1