0

I have a 3d-like room in CSS, and used jQuery to add a look around effect on mouse move with perspective-origin and a zoom in/out effect with mousewheel.js that changes the perspective amount.

JSFiddle

But it's not very realistic. It's not like if we were looking around, it just seems that the room is deformed.

So I tried to correct this with transform: translateY() on my lateral walls but it's not what I expected.

Do you have any solutions ? Thanks !

PS: Sorry for my english, I'm french ;)

Ann MB
  • 146
  • 1
  • 13
  • It is hard to know what you mean by "realistic". CSS Transforms aren't made for making things look realistic. Do you have any examples of the effect you are going for? – elliottregan Dec 02 '17 at 20:36
  • I think you have to translate your room on the Z-axis: $("section .room").css({ transform: 'translateZ('+ (value) +'px)' in the mousewheel event – Marouen Mhiri Dec 02 '17 at 20:49
  • Thanks Marouen, I tried on the whole
    but the room was getting out the screen, but I'll try with .room at once. @oatmealsnap : something like a FPS game. I know it's not going to be very realistic, I will abuse of CSS 3D furthermore, I just want a bit of interactivity :)
     – Ann MB Dec 02 '17 at 20:54
  • @MarouenMhiri It's working good for zoom in/out ! Now I have to find a solution to the behavior when the mouse moves. – Ann MB Dec 02 '17 at 21:07
  • oui mon ami c'est pas facile ton truc! au fait il faut combiner mousewheel avec mousemove. Peut être en essayant d'intègrer mousemove dans mousewheel ? :-/ – Marouen Mhiri Dec 02 '17 at 21:13
  • Oh, tu écris bien français :) Question en passant : `+=`n`px` et `-=`n`px` ne fonctionne pas avec `transform` ? @oatmealsnap I found an example of what I want here http://www.bestjquery.com/?Dt0atS0T – Ann MB Dec 02 '17 at 21:32
  • oui là il y'a une possibilité de récupérer les transformX-Y-Z en utilisant ceci : https://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery/5968313#5968313 – Marouen Mhiri Dec 03 '17 at 08:24

1 Answers1

2

MADE IT ! With a lot of 3d transform. See the fiddle if you want to see the difference, and the solution ;)

BEFORE | AFTER

NOT WORKING WITH FIREFOX :( Okay with Opera, Chrome... I can't find a hack for Firefox about 3d transforms because I think it's the problem.

Help :)

Ann MB
  • 146
  • 1
  • 13