My Challenge Submission:
Here above you see an old-timey TV Set I made that is playing an old black and white Lucy Show on it for a 3D CSS Challenge (see more information about the challenge below under The Challenge).
It's riffed off a @CodePen that Kevin Powell and Amit Sheen did of a cube on a tile floor with a ball bouncing up and down on it with the 'camera' orbiting around it.
Kevin and Amit's YouTube Tutorial
This is the link to the excellent video that Kevin and Amit did showing the steps to create this @CodePen: Tutorial on YouTube
Here is the @CodePen that I did to reproduce what they did in that tutorial:
Now let's talk about the challenge...
The Challenge
I ran across this Challenge Video from Kevin Powell like just two days before the ending date of a challenge. I didn't have much time left, but I thought it would be fun to whip out something 3D in CSS that had a YouTube video playing on one of the 3D surfaces.
I basically started with the cube from their demo, changed its dimensions, its color, added a YouTube IFRAME inside a DIV to play the video on the 'TV screen' and a couple more DIVs for knobs on the TV.
I made a PNG image of the TV program's title page and load it in right away. This so that something's there for the user to see on the 'TV screen' even if it take a few moments for the actual video to come up.
The video itself is hidden for several seconds so that the user will not see some junky looking YouTube loading stuff. And then it is shown after that stuff is finished displaying. The video will appear over the static image of the program title page. This is done by using a CSS animation that will change the opacity setting from 0 to 1.
I also changed the animation so that the front of the TV never goes out of view.
There's a lot of things I can think of to improve it. But it was still fun!
Here's Some Possible Ideas for the Future:
- Make the knobs stick out as 3D items.
- Improve the TV set's proportions.
- Add some additional stuff like a speaker grill to TV.
- Make it so that the knobs would work!
- Turn the volume up and down.
- Change channels and toggle between other TV shows.
Maybe you could fork my Pen and try adding some of those features yourself?
Top comments (0)