How Do I Make 3D Objects in CSS - html

I've been trying to create a rectangular prism as indicated from here:
(example) http://desandro.github.io/3dtransforms/examples/box-02-show-sides.html
There's also a tutorial page.
but these are my results,
http://codepen.io/anon/pen/qFdiu
I don't know what is wrong here.. sometimes when I check a preview in chrome, it will animate, but not in the right place, the prism won't be in its container and it won't transform on the correct origin, i.e. like flipping a block on the floor it will move over, instead of being in its original place but on a different face. I've even tried copying everything from the tutorial but can't find out the fault. I am pretty new to webdesign. Would appreciate any help :)

Related

Box2D Lights Wall Shadowing

Alright, so I've been pondering over this for quite awhile now; looking through documentation, examples, previously made games, ect...
Basically (for those familiar with Box2d Lights), I'm trying to create bodies on top of my walls (so there's shadow casting, and so the light will stop instead of going through the wall). I have no problem creating, positioning, and updating the bodies, but the only real problem which I can't figure out is a way to make the filled body to be invisible or transparent so it shows my tileset (or wall) while still giving a shadow effect if light was casted onto it.
Perhaps I'm thinking or going about this the wrong way. Feel free to correct me.
Here's an image to display an example of a body I created on top of my wall. The shadows are handled properly, but I cannot see my wall.
Any help is greatly appreciated. Thanks.
You have two options here:
Set the shadow-dropping bodies behind the wall and use only transparent bodies for collision detection using BitMasks
Or render your wall sprites on top of box2dLights

Remove Child? AS3

So I'm incredibly new to AS3, and barely know my way around.
I built a simple colouring book game, essentially changing some of the graphics of a tutorial, and replacing numbers and sizes to fit what I wanted to achieve. I then built a menu screen in a seperate scene and linked the two with code snippets and buttons to go back and forth.
The colour pickers are generated when the game is ran, however an issue I seem to be facing is that when I go back to my main menu, they are still there.
Can someone point me in the right direction as to how I can fix this? I'm sure it's a rather simple fix. I can provide the code from the tutorial if needed
I think you're right you need removechild this color to remove one color from stage... Maybe you need removechildren to remove all color, whin are on stage... Try this two way

I'm looking for a simple code sample that shows how to rotate a cube with text

I've been tasked with creating an HTML5 demo that basically consists of a rotateable cube. Each face should have different text on it, and then when you tap a face it should animate itself so that the face expands to fill the entire screen.
Are there any good (simple) tutorials out there that show how to do this? Everything I've found so far is excessively complex and appears to contain a great deal more code than just what I need. I have a basic understanding of HTML elements and javascript.
Check out whats going on at http://www.htmlfivewow.com/slide44 which tackles most of your cube needs. Hit right key a few times and you'll see it going. You should be able to work from that. It's all just <div>s.

HTML Canvas: Saving a graphic element to be modified later by other users

I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.
Update:
To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.
You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.
The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.

Making the points always visible in a flex line chart

I'm trying to do something very similar to this example (source code enabled):
http://www.sunild.com/proto/line_chart_example.html
When you hover over each data point, a circle appears indicating that this is a point. How do I keep those circles visible at all times?
Edit: this example isn't mine, but you can view the source enabled here:
http://www.sunild.com/proto/line_chart_example_src/index.html
Umm, the case you show is a working example giving no details about the code itself. There are enormous ways the code could be.
For Eg - The code could be keeping an event listener over & out a mouse event...So removing it pretty much keeps the circles there.
But still I suggest show at least what you are doing, if not that code to get some clue.