3D it!

Using CSS 3d to make every website into 3d(kind of). It is a bit buggy but you can bookmark the script to your bookmark bar and have some 3D fun on any websites by one single click!

The get offset function is not accurate, it looks weird then the div is too large but it looks alright on most of the sites.

Control

Change the parameters and see the preview of your customized 3d script:

3D iT! by Edan Kwan

Publications

Fast Co.Create: MAKE ANY WEB PAGE 3-D WITH 3-D IT!

Credit

Myself: @EdanKwan

Control Panel: dat-gui

Images: Cristiano Galbiati, Vivi Rindom, Subhadip Mukherjee, joeymc86

Web Font: Open San by Steve Matteson

Comment

Bob Foster

Really very good! Amazing...

2016-11-04 09:31:09

AndresAbad

its nice but there should be a way to trigger and make the site stop moving since parts become inaccessible when the mouse is near it, there should be a trigger so it stops (maybe clicking the scrollwheel) and also a fix because there are objects that act like they were outside of them but their z-index stays the same so they vanish if its tilted in a certain way. in total there are only 2 things that need to be fixed before this is perfect.

2016-04-22 13:42:52

Are

Awesome effect! Is there some way I could use it on a project?

2016-04-09 23:40:51

Sven

Красиво сделано, оригинальность на высоте.

2016-02-02 23:52:09

vishal

awsm

2015-08-28 02:44:01

Dan

Amazin..!!!

2015-05-29 13:12:31

Luan

very nice ! unbeliveble

2015-04-22 05:50:29

mahesh jangid

plz send this code in mail , i request u jangid995@gmail.com tnkx so much

2015-03-20 01:50:53

mahesh

IS Very Nice......Osm I need Code this Program

2015-03-20 01:48:52

SenorD

AWESOME

2015-03-16 16:27:33

Anthony Guba

AWESOME

2015-03-16 16:26:44

Joe

Really cool stuff! Wonder how it behaves on mobile though...

2015-02-07 17:26:08

Rolling Tartana Beatz

Great 3D desing!

2015-02-03 11:54:15

Mydisplays

Good stuff!

2014-12-18 11:30:57

james

shweet

2014-12-16 11:08:12

Emske

Cool !!!

2014-09-08 16:12:32

Michael

Hi! Please send me on email how i able to make a 3d website with this script ;) Thanks!

2014-07-30 02:49:07

prateek

please give me src code plsss!!!! :-)

2014-07-02 11:41:54

Rishabh

sss

2014-05-28 11:58:54

evc

github?

2014-05-28 03:23:06

leyroy

Fantasic

2014-05-27 16:49:04

joe

Faaaaaaaaaaannnnnnntttttttttaaaaassssssttttttttiiiiiiiiiicccccccccccc

2014-05-27 16:48:16

Vikas

great job man!!! but tell me how to stop the script without reloading the page

2014-05-15 01:32:50

how do i iqwakslmdz

sex

2014-03-18 19:46:07

Jack Campbell

Edan, can you contact me, please? I am leading a project to bring an amazing new change to the digital signage industry, shifting signs to 100% HTML5/CSS3, with content running from a microserver at each display. http://www.uboxu.com (just started on this site, very incomplete). I am looking for HTML5/CSS3 geniuses to bring on board early, and put in positions to make money when we launch by providing the tricks and tools our developers will need to create advanced content — like tilted web pages.

2014-02-25 11:38:04

Max

Super!!!

2014-02-20 02:02:31

Rich

can I get the script and try it on my website?

2014-01-31 13:47:15

Richard Gross

awesome...do you have the script so Icould try it on my website...would really mess with some heads lol

2014-01-31 13:46:18

Zeh Fernando

Wow!!

2014-01-28 09:42:57

Zeh

Congratz!

2014-01-28 07:42:41

Miller

miss you a lot, kisses

2013-11-26 10:40:42

Miller

miss you, kisses

2013-11-26 10:38:20

Arjen

Amazing job, where is the script/ css to explore this further? Thanks for sharing!

2013-10-07 10:48:26

prashant

superb..can someone send me the code of it....on my email

2013-06-06 07:03:57

Raed

Excellent work, this is the future of the web browsing

2013-05-14 06:32:33

Ravi

I want to use this source code in my site . could you please provide it

2013-04-19 15:18:40

Daniel

The job is cool, but i have the last IE and Mozilla installed, the animation is very choppy...

2013-04-11 15:30:52

bek

This is demo iframe!

2013-02-27 12:02:13

Farryx73

I like this program.

2013-02-27 11:58:39

Luca

Can we have the source code please?? :)

2013-02-27 05:38:33

wiyono

really nice

2013-02-24 08:30:00

sibiraj

how wil i use this technique of 3D...???

2013-02-13 08:39:58

mon mohon

awesome...........

2013-01-27 08:04:55

u91

Nice work bro..

2013-01-04 04:17:46

HARI

IS sooo good ....... i like to study how to design it.......

2012-12-15 02:28:30

Raghu Dalal

niceeeeeeeeeeeeeeeeeeeeeeeeeee

2012-12-13 00:35:55

Chandan

awesome:D

2012-12-12 02:12:56

Aaron Cyrus Anis

Hey.. Who owns this site? I wanted to know how you do this?? This is awesome.... Can you tutor me about this 3D effect website?

2012-11-25 07:33:41

Rutishauser

The background picture is 2D. This ruins the whole 3D effect.

2012-10-25 10:15:02

Biruk

amazing! feels so real :)

2012-09-04 05:45:01

kassee evans

wow! thank you... this is way cool. way to go, man.

2012-08-02 12:09:41

Miller

i loved this

2012-07-25 15:53:57

aaa

aaa

2012-07-22 11:45:12

Druckerei WIRmachenDRUCK

Very fine!

2012-07-19 07:07:11

Miller

I love it

2012-07-18 12:25:06

adhi

briliant

2012-07-03 22:33:12

Denis Abdullin

Заебца

2012-06-27 02:54:56

Martin

When will you add 3dit as repo on github with the full sourcecode?

2012-06-27 02:10:07

jibran rarh

very good

2012-06-24 08:58:30

miller

i loved

2012-06-21 14:23:43

Beben Koben

So Edan :D

2012-06-07 14:38:13

Olivier Clement

Hey, this is great! But why the tease and no code sharing? :) Would definitely love to see this released publicly! Pretty please? :P

2012-05-24 13:06:15

Rita

Maybe

2012-05-24 04:12:17

Alexandre Duarte

Fantastic!!!

2012-05-21 09:10:42

Kevin

How do I add it to my site

2012-05-15 14:46:56

Immanuel

Nice!.. Different concept from itilt plugin but will probably become more popular. Note: Looks better on Chrome like ppl already commented. But noticed that lightboxes dont always work properly with it, but are likely to work better on FF than on Chrome.

2012-05-14 10:43:49

Jan Camp

What if I want to make a particular website look 3D to any visitor? Do you have code for that?

2012-05-14 10:10:24

piet

Magnificent. Congratulations.

2012-05-14 08:20:17

martin

fantastic!

2012-05-13 10:43:32

Mahesh Pawar

I like this effect. thanks for the update

2012-05-12 21:23:31

Owen

Really nice work!

2012-05-11 11:17:12

haris

superb!!!!

2012-05-11 10:18:46

Steve

AMAZING <3

2012-05-09 20:49:43

Steve

AMAZING <3

2012-05-09 20:49:22

Adda dada

OK ddadas

2012-05-09 17:11:24

oumu

such cool stuff!

2012-05-08 02:44:32

pascal

Amazing! thx!

2012-05-04 05:52:48

Fred

This is amazing, well done Edan!

2012-05-04 03:42:25

Moridon

Wow Amazing !!! But,is it work on facebook timeline ???

2012-05-03 12:29:22

ganapathysundaram

vey nice

2012-05-02 23:43:31

Bnpositive

Very cool and captivating use of the technology to present information in a completely different way than expected.

2012-05-02 07:27:00

prabuddhika

wooooooooooow very nice! superb!!!!!!!!!!!

2012-05-02 04:54:50

Gaurav M

While changing the maxElems - it give a little jitter.. as you already said, it is under improvement. Very Cool Stuff! Overall

2012-05-02 01:56:56

Steve Lee

Super...Super...

2012-05-01 22:18:19

Guang

if you remember me we never meet or conversation but i do follow your work all the time. Amazing and thank you.

2012-05-01 21:21:20

stef

neat. well done man^^

2012-05-01 17:00:13

lvlek

zbiornik

2012-05-01 12:09:17

udi

nice

2012-05-01 11:43:27

udi

nice

2012-05-01 11:42:21

claudio

very cool

2012-04-30 14:09:44

claudio

very cool

2012-04-30 14:09:08

claudio

cool

2012-04-30 14:07:38

Velotron

Nice work!

2012-04-28 14:51:31

Phan Tan Duy

Nice

2012-04-28 08:45:55

russett

Sweet!

2012-04-27 14:32:39

tass

holy shit!! amazing

2012-04-27 13:05:13

katie

Not good. Horrible WP site

2012-04-27 10:45:31

Michael Calkins

This is friggin entertaining to use and share!!

2012-04-27 08:41:03

zimbrul

How cool is this! Brilliant idea!

2012-04-27 08:24:51

Troy

Impressive. Most impressive.

2012-04-27 07:43:46

ff12

Works great in chrome, but not in FF12.

2012-04-27 07:20:19

srinivas Marturi -splitcoolors

AAAsum Work... use full for future works.

2012-04-27 06:57:07

Goues

Pretty awesome, looking forward to seeing this as a standard, not a high-end thingy. :)

2012-04-27 05:47:33

sanket

its super... flash in danger???

2012-04-27 05:01:56

TARIFA RAK

GREAT!

2012-04-27 04:51:50

Raff

great work :)

2012-04-27 04:42:17

Darian Skarica

Hello, Can we put this code directly in our website?

2012-04-27 04:39:10

tvdesign

wow.. great work chum :)

2012-04-27 04:38:41

Nguyen Ho

Awesome... Very nice work

2012-04-27 04:38:03

Sai

Really good work :) we hope u continue it :)

2012-04-27 03:59:41

cihan

good job. gratz.

2012-04-27 01:21:14

740

nice job!!!!!!!!!!!!!

2012-04-27 00:09:58

dfvsd

trwer

2012-04-26 23:45:47

gibbs

cool. you should make an addon. i would lyk to put this on my website. i love it

2012-04-26 23:07:53

djrock3k

rocking good.

2012-04-26 19:55:42

Saad Salman

Really nice . Wont work on flash tho

2012-04-26 19:39:51

Corbin

Amazing! I was trying to get something similar to this working for one of my projects, but never managed to get it working like this. AWESOME JOB Are you interested in working on a project like this?

2012-04-26 18:29:45

Riccardo

Very nice

2012-04-26 17:45:50

Mr. Bray

This a brilliant approach to web design!

2012-04-26 16:02:02

Pedro

Really nice idea

2012-04-26 15:49:47

Rafael Rinaldi

I dare you to click in a menu item.

2012-04-26 15:26:59

Jose Fair

Quew buen trabajo y muy diferente casi unico,

2012-04-26 12:58:07

Stephanie

If it looks chunky in Firefox, try it in Chrome. Looks fantastic.

2012-04-26 12:53:57

Nathan

Nice!

2012-04-26 12:43:54

lee

this is adorable! Thanks!

2012-04-26 12:40:42

existdissolve

Next: Need an easy way to transform links to sites to include this script. Could have lots of fun with unsuspecting users ;)

2012-04-26 12:40:12

Guillermo

kick ass!

2012-04-26 12:39:28

Scott

This is amazing

2012-04-26 10:43:13

ytsejammer

bright future

2012-04-26 10:21:37

turtles

i like turtles

2012-04-26 07:13:30

ROLLO

burner!

2012-04-26 06:39:49

Jakob Hagemann

Good stuff!

2012-04-26 05:25:48

Jose Philip Raja

Wow! Great work!.. Thanks!!

2012-04-26 04:38:51

Very

Nice

2012-04-26 04:36:59

Chris

powerful CSS3! awesome!

2012-04-26 03:37:08

leafy

This is VERY kewl!!

2012-04-26 03:25:42

Nick

Finally, Johnny Mnemonic

2012-04-25 12:55:12

Rocky

Awesum Work..! Keep this up!! M enjoying this stuff!

2012-04-24 13:50:22

jmeador

hi - my name is Jeff

2012-04-24 12:41:28

thoughton

Very cool indeed.

2012-04-24 10:37:15

Kiu

SWEEET!

2012-04-10 11:24:32

juks

nice job

2012-04-10 10:49:20