JavaFX apply rotate to an image from CSS

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