Symbol Factory component flip Horizontical

Ignition
1

Hi,
I am using a motor component imported from Symbol Factory. Now I want to flip horizontally, but I could not find any option in the property editor.

Actual:

image
image287×207 3.52 KB

Desired:

image
image287×207 3.54 KB

Thanks.

2

You probably want to create a custom style class that you will apply to your motor symbol. Here's an example of what I mean;

.psc-motorStyle{
	transition: 1s ease-in-out;
}
.psc-motorStyle:hover{
	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);
 	cursor: pointer;
}

You'd apply 'motorStyle' to you motor icon and this would be the result.

motor_flip

2 Likes
3

Hi first thanks for help.
I just want to flip and not move continuously.
As we have the pump direction left, but in default image is right.

4

Look at the code snippet I sent previously, it's already there. Here's the style class that only mirrors the motor via the specified axis;

.psc-motorStyle{
 	transform: scaleX(-1);	/*Mirror via the X axis*/
 	transform: scaleY(-1);	/*Mirror via the Y axis*/
 	/*rotate: 90deg;	Rotate the image*/
}

You can play around with this to adjust the snippet to your specific needs. Also, if you're using a coordinate container be sure to warp the motor symbol in a flex container and then apply the style class to the motor.

2 Likes
5

Thanks alot.