This was a solution for a customer request for a flat rotating hotspot.
A working project is attached below.
It uses CSS and a graphic made in Photoshop but can be any graphic you want to use.
How it was built.
Starting with a new skin add a Hotspot Template
Then give it the ID ht_node so it will be used by the Hotspot Type Node.
Then make your image a child of the Hotspot, I am using the ID ht_image
Give the Hotspot Template the action to open the next panorama
Then you need to set the Modifier so it scales with FoV (zoom)
Set the images Anchor to centre and set position to X/Y to 0/0px so it is now on top of the Hotspot Template in the Skin Canvas.
A Text Box has also been added for a tooltip but this is optional.
The text box is using the placeholder $(hs) so it displays the Hotspot Title and has a visible logic block so it shows when the Mouse is Over Parent.
To make the image rotate you need to copy and paste this code into the Skins Embedded Stylesheet.
Code: Select all
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
So it looks like this:
Now select the image ht_image in the skin and select CSS Styles Inner Element and add:
Code: Select all
animation: rotation 2s infinite linear;
You can adjust the speed, it is how long it takes to rotate once so the larger the number the slower it will rotate.
To make it look flat on the floor the X-axis of the image needs to be changed.
To do this select CSS Styles in the image's properties and add the code:
Code: Select all
transform: rotateX(255deg);
Again you can change the setting to make it look flat depending on the height you set your Hotspots.
There is now a new version for Pano2VR 7.
Regards,