Skip to main content
A
Ace_Rothstein_3106681-Visitor
1-Visitor
February 29, 2020
Solved

Are CSS animations applicable to 3D Images?

  • February 29, 2020
  • 2 replies
  • 2290 views

I got an image as a 2D widget to work using css keyframes animation but it doesn't work with 3D images. I wanted to blink the 3d image as well as create a few different animations. 

Best answer by AllanThompson

I"m not sure if you can use CSS animations in 3D, but I have seen an example of animating a 3D image.  If you watch the PTC demo video of the Howden diaphram compressor here, when they get to the service section (about half way through) you can see the instruction panels above the model shrinking and fading out or growing and fading in.  My guess is that this is being done with JS functions rather than CSS, but I"m not certain.

2 replies

T
tincescu5-Regular Member
5-Regular Member
March 2, 2020

Hello,

 

There are some interesting other approaches for animations.

For example, you can do this for the blink effect:

https://community.ptc.com/t5/Vuforia-Studio/3D-Image-Blink-in-Experience/m-p/605754

 

Also, what exactly are those animations that you want?

 

Best regards,

Stefan.

A
Ace_Rothstein_3106681-VisitorAuthor
1-Visitor
March 2, 2020

Hello @tincescu, 

          Thank you for replying. I have incorporated the blinking effect to a 2D image widget and it works fine. I wanted to further try and create animations like fade out or scale out the 3D images when triggered for visible.

For instance, can the similar animation keyframes for the blinking effect be applicable to any 3D image?

A
AllanThompson16-PearlAnswer
16-Pearl
March 3, 2020

I"m not sure if you can use CSS animations in 3D, but I have seen an example of animating a 3D image.  If you watch the PTC demo video of the Howden diaphram compressor here, when they get to the service section (about half way through) you can see the instruction panels above the model shrinking and fading out or growing and fading in.  My guess is that this is being done with JS functions rather than CSS, but I"m not certain.

A
Ace_Rothstein_3106681-VisitorAuthor
1-Visitor
March 3, 2020

Hello @AllanThompson ,

    That is exactly what I wanted. The similar effect of 3D images in the Howden Experience. Thanks anyways. Much appreciated.

Terms & ConditionsAccessibility statement