need to share file
it does not show all the code I copied
what is the best way to share
You should be able to paste your code here, use the icon above, so it stays formatted correctly, see the gif below…
If you want to share a file, you could upload it to your server as a zip or send it to an online file sharing like File.io or WeTransfer.
Hope that helps 
<style>
.cont {
perspective: 600px;
--tzx2: calc({{panes}} / 2);
}
.cube {
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
height: {{panes}};
width: {{panes}};
background: red;
animation: spin 5s infinite linear;
}
.panel {
position: absolute;
height: {{panes}};
width: {{panes}};
border: 1px solid #ccc;
}
.pf { transform: rotateY( 0deg) translateZ(var(--tzx2)); }
.pb { transform: rotateY(180deg) translateZ(var(--tzx2)); }
.pr {transform: rotateY( 90deg) translateZ(var(--tzx2)); }
.pl { transform: rotateY(-90deg) translateZ(var(--tzx2)); }
.ptp { transform: rotateX( 90deg) translateZ(var(--tzx2)); }
.pbm { transform: rotateX(-90deg) translateZ(var(--tzx2)); }
@keyframes spin {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
10% {
transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
}
20% {
transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
}
30% {
transform: rotateX(36deg) rotateY(36deg) rotateZ(72deg);
}
40% {
transform: rotateX(146deg) rotateY(146deg) rotateZ(36deg);
}
50% {
transform: rotateX(36deg) rotateY(180deg) rotateZ()144deg;
}
60% {
transform: rotateX(-146deg) rotateY(-36deg) rotateZ(-72deg);
}
70% {
transform: rotateX(-108deg) rotateY(-108deg) rotateZ(-36deg);
}
80% {
transform: rotateX(-72deg) rotateY(-72deg) rotateZ(-72deg);
}
90% {
transform: rotateX(-36deg) rotateY(-36deg) rotateZ(-36deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}
</style>
<div class="flex items-center justify-center h-screen bg-gray-200">
<div class="cont">
<div class="cube ">
<div class="panel pf {{pfc}}"></div>
<div class="panel pb {{pfb}}"></div>
<div class="panel pr {{pfr}}"></div>
<div class="panel pl {{pfl}}"></div>
<div class="panel ptp {{tp}}"></div>
<div class="panel pbm {{bm}}"></div>
</div>
</div>
</div>
properties
{
“groups”: [
{
“title”: “Untitled”,
“icon”: “paintpalette”,
“properties”: [
{
“title” : “Cube Size”,
"id": "panes",
"format": " {{value}}px ",
"slider": {
"default" : 100,
"min" : 100,
"max" : 250,
"units": "px",
"round": true
}
},
{
“title”: “Front Color”,
“id”: “pfc”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
{
“title”: “Back Color”,
“id”: “pfb”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
{
“title”: “Right Color”,
“id”: “pfr”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
{
“title”: “Left Color”,
“id”: “pfl”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
{
“title”: “Top Color”,
“id”: “tp”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
{
“title”: “Bottom Color”,
“id”: “bm”,
“format”: “bg-{{value}}”,
“themeColor”: {
“default”: {
“name”: “red”,
“brightness”: 300
}
}
},
]
}
]
}
not worked out how to set colours at beginning, in this format you need to change colours and cube size. the file just opens fine
once its working and saved works fine
in properties adjust panes min to 1 and max to 500
still need to share files what does everyone else use
Got the project from your dropbox. Downloaded as folder so just needed to add .elements to the end of it and it worked just great 
btw. You could move your style code into the Styles tab to keep things more manageable if you wanted.
cool, had to work out to use calc and properties to divide by 2, this is really powerful stuff, excellent software
ah I wasn’t sure if the {{value}} property would work in there, I will try, if so I have a lot more options, I did try originally but may have not understood at that time, need to add animation speed, images add to panes and some text etc, then I think I may have better understanding,
so my dropbox link worked, never used links in db before
Yes, {{value}} works in the Styles area 
Here’s an updated doc with the css in the styles area:
https://realmacdan.smmall.cloud/MTcyMjE4NjYwMDk5MA
Dan thanks cool
Now I know a couple of things from this exercise I can generate a lot of variables and use the {{values}} to perform a lot of things with one slider, not read all the docs yet, is there will there be a function to loop this would help generating a lot of stuff
Again powerful stuff other should beable able to create really cool components all ready great what level next
You can loop through items, like pages, resources, and data collections…
This project example has components that loop through pages and collections, have a look at that file to see if it helps.