Is CSS3d possible to implement in Bubble?

Need help Plugins
1

Hello! I am looking to implement a background that moves - unlike a regular, static background.

Examples include:


https://codepen.io/akm2/pen/rHIsa

I am wondering if there are any suggestions on how to go about this structurally and if there are any plugins that can make this easy!

Thank you for your time,
~Cody

2

Since you are wanting to run some custom CSS 3D transformations client side, I do not see any reason as to why this would not be possible.

What would want to do is add in a HTML element on your bubble page and add in any CSS 3D transforms, divs etc to that element.
A much more elegant way to do the above would be to use (or make) a Bubble plugin.

Cheers! :slight_smile:

3

I came across a work-around.

First I exported my HTML, CSS, and JS files from CodePen. Then, I uploaded these files to a free hosting site (i used 000webhost). Lastly, I executed the html page on there and copy/pasted the URL to a HTML element on my bubble page. I made the HTML element an iFrame.

This resulted in being able to use CSS3d in Bubble.is

Thank you!

4

Thanks for the feedback! Just to tell you, you can upload files on your Bubble app, because those free hosting options are very unreliable, especially 000webhost which is a shell to a shell that is a shell to another corporation and has very bad security practices that lead into user email and pasword leak.

Plus an iFrame is a very heavy and insecure method to use.

Are you sure you can’t just use a canvas in the HTML element in your Bubble app, load the CSS inline in your bubble-page element HTML header and load the JS also in the bubble-page element HTML?

1 Like
5

Hey vini,

I am just unsure on how to do that. I uploaded the CSS and JS files and included them in the header:

   <link rel="stylesheet" type="text/css" href="style.css">
   <script  src="index.js"></script>

The spots where is says src="" and href="" above - i put the URL that it stored it in amazon S3 (when i click “see” next to the uploaded files").

Then i put the JS code (?) in the “Script in body” section.

I’m not sure what to do next in order to connect this to an HTML element in my bubble app.

6

I found the solution here:

1 Like