JavaFX apply rotate to an image from CSS - javafx

Question

I'm wondering if there is a way to apply some transformations (i.e. rotate) to an image setted to some button. I am using css to specify all images by such way:
.custom-button {
-fx-graphic: url("imgs/buttons/button.png");
...
}
.custom-button:hover {
-fx-graphic: url("imgs/buttons/button_hover.png");
...
}
.custom-button:selected {
-fx-graphic: url("imgs/buttons/button_selected.png");
...
}
I want to specify such transformation here in css as well.
How can I achieve that? I am supposing to find something like:
.custom-button .graphic {
-fx-rotate: 90;
}

Answer 1

Let's start with an example application:
Main.java
package application;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Button button = new Button("Button");
VBox vBox = new VBox(button);
vBox.setPadding(new Insets(10.0));
Scene scene = new Scene(vBox, 200, 100);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
System.out.println();
}
public static void main(String[] args) {
launch(args);
}
}
application.css
.button {
-fx-graphic: url(image.png);
}
Result
Method 1 (find out which class is used for the image)
This can be easily done using a debugger (set a breakpoint on println() and check the content of button.graphic.value). The class which is used here is ImageView. This means the image can be rotated using:
.button .image-view {
-fx-rotate: 45;
}
Result
Method 2 (set a custom class for the graphic object)
This can be done using a ChangeListener:
button.graphicProperty().addListener((ChangeListener<Node>) (observable, oldValue, newValue) -> {
newValue.getStyleClass().add("my-class");
});
Then the following can be used to rotate the image:
.my-class {
-fx-rotate: 45;
}
Result
Padding
You might need to add additional padding to the button, if the image takes up too much space:
.button {
-fx-graphic: url(image.png);
-fx-graphic-text-gap: 10;
-fx-label-padding: 5 0 5 5;
}
Result