For my custom implementation of fancybox 3, I have incorporated the usage of font awesome icons. You have the flexibility to replace them with glyphicons or any other icons of your choice.

//customizing fancybox menu to include an option to rotate image
    $(document).on('onInit.fb', function (e, instance) {
        if ($('.fancybox-toolbar').find('#rotate_button').length === 0) {
            $('.fancybox-toolbar').prepend('<button id="rotate_button" class="fancybox-button" title="Rotate Image"><i class="fa fa-repeat"></i></button>');
        }
        var click = 1;
        $('.fancybox-toolbar').on('click', '#rotate_button', function () {
                var n = 90 * ++click;
                $('.fancybox-image-wrap img').css('webkitTransform', 'rotate(-' + n + 'deg)');
                $('.fancybox-image-wrap img').css('mozTransform', 'rotate(-' + n + 'deg)');
            });
    });

To add a fun twist to your fancy box content, try rotating the outermost div. In my example, I'm using fancybox-skin (fancybox version 2).

afterShow: function(){
    var rotation = 1;
    $('.fancybox-wrap').append('<div id="rotate_button"></div>')
        .on('click', '#rotate_button', function(){
            var degrees = 90 * ++rotation;
            $('.fancybox-skin').css('webkitTransform', 'rotate(-' + degrees + 'deg)');
            $('.fancybox-skin').css('mozTransform', 'rotate(-' + degrees + 'deg)');
        });
};

After collaborating with @Ashik, I was able to successfully implement the solution without sacrificing the title display by rotating .fancybox-inner and tweaking some CSS to maintain the white border. Additionally, I initialized the fancybox within the $(document).ready() function, requiring a slight adjustment in binding the button.

Since this is quite an extensive answer, please let me know if anything important has been omitted. It's worth noting that IE compatibility is not a concern for this solution, fortunately!

To retain the position of regular arrow and close buttons at the top, it was necessary to add the fancy box button helper CSS and JS files:

<link href="/Content/css/jquery.fancybox.css" rel="stylesheet"/>
<link href="/Content/css/jquery.fancybox-buttons.css" rel="stylesheet"/>

<script src="/Content/Scripts/fancybox/jquery.fancybox.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox.pack.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox-buttons.js"></script>

The fancy box initialization is performed within $(document).ready(), as mentioned earlier, set up as follows (note the removal and addition of arrows and close buttons using the button helper's tpl property):

$(document).ready(function() {

    $(".fancybox").fancybox({
        loop   : true,
        helpers: {
            buttons: {
                position: 'top',
                tpl     : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a id="fancybox-rotate-button" title="Rotate" data-rotation="0" onclick="FancyBoxRotateButton()"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
            }
        },
        closeBtn: false, // you will use the tpl buttons now
        arrows  : false  // you will use the tpl buttons now
    });

Below is the custom rotation button's onclick function:

window.FancyBoxRotateButton = function() {
    var fancyboxInner        = $('.fancybox-inner');
    var fancyBoxRotateButton = $('#fancybox-rotate-button');
    var currentRotation      = parseInt(fancyBoxRotateButton.data("rotation"));
    var rotation             = 'rotate(-' + (90 * ++currentRotation) + 'deg)';

    fancyboxInner.css({
        '-moz-transform'   : rotation,
        '-webkit-transform': rotation,
        '-o-transform'     : rotation,
        'transform'        : rotation
    });

    fancyBoxRotateButton.data("rotation", currentRotation.toString());
}

To address the white border issue and adjust the size of the custom button ul, along with setting a custom picture for the rotation button, alterations were made by removing backgrounds from .fancybox-skin and applying them to .fancybox-inner:

#fancybox-buttons ul{
    width: 130px;
}

#fancybox-buttons #fancybox-rotate-button {
    background-image: url('/Content/images/fancybox_rotate.png')
}

.fancybox-skin {
    background: none !important;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: none !important;
    -moz-box-shadow   : none !important;
    box-shadow        : none !important;
}


.fancybox-inner {
    border-radius     : 4px;
    border            : 2px solid white;
    padding           : 10px;
    background        : white none repeat scroll 0 0;
    -webkit-box-shadow: 0 10px 25px #000000;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow   : 0 10px 25px #000000;
    -moz-box-shadow   : 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow        : 0 10px 25px #000000;
    box-shadow        : 0 10px 25px rgba(0, 0, 0, 0.5);
}

I hope this detailed explanation proves helpful to someone!

To rotate your image, use the CSS property

-webkit-transform: rotate(-90deg);

specifically on the '.fancybox-inner' class element rather than the '.fancybox-wrap' to ensure that only the image rotates without affecting the rest of the container containing controls and descriptions.

In order to enhance the user experience, I implemented a solution where I removed the arrows and close button from the fancybox interface. Instead, I applied a smooth fade-in effect to display the fancybox slideshow after the rotation effect was completed on the entire fancybox-wrap element. The key steps involved setting the display property of the fancybox-wrap to none during the "beforeShow" event, followed by a fade-in action during the "afterShow" event. Below is the customized code snippet that illustrates this implementation:

    $(".fancybox").fancybox({
      helpers: {
        overlay: {
          locked: false
        }
      },
      arrows: false,
      closeBtn: false,
      beforeShow: function(){
        if($('.fancybox-image').length>0){
           $('.fancybox-wrap').css('display', 'none');
            var imageID = getFancyboxImageID();
            var rotation = getFancyboxRotation(imageID);
            if(rotation!=0){
              fancyboxRotate(rotation);  
            }
        }
      },
      afterShow: function(){
        if($('.fancybox-image').length>0){
          $('.fancybox-wrap').fadeIn();
        }
      }
    });

To preserve the close button and caption elements, I implemented a clever CSS3 transformation technique:

afterShow: function() {
    var click = 0, deg;
    $('.fancybox-inner')
        .append('<img id="rotate_button" src="https://cdn0.iconfinder.com/data/icons/super-mono-sticker/icons/button-rotate-cw_sticker.png" title="Rotate 90° CW">')
        .on('click', '#rotate_button', function() {
            click = (++click % 4 === 0) ? 0 : click;
            deg = 90 * click;
            $('.fancybox-wrap').css('transform', 'rotate(' + deg + 'deg)');
            $('#rotate_button').css('transform', 'rotate(-' + deg + 'deg)');
            sessionStorage.setItem('prev_rotated_image', $('.fancybox-image').prop('src'));
            sessionStorage.setItem($('.fancybox-image').prop('src'), deg);

            // Adjust close button position and rotate the label based on rotation
            switch (deg) {
                case 90:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 180:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, -'+ ($('.fancybox-wrap').height() + $('.fancybox-title').height() + 16) +'px) rotate(-' + deg + 'deg)');
                    break;
                case 270:
                    $('.fancybox-close').css('transform', 'translate(0px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(-' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 0:
                case 360:
                default:
                    $('.fancybox-close').css('transform', 'translate(0px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, 0px) rotate(0deg)');
            }
        });
}

Shoutout to @Paul for the fantastic code snippet! I made some modifications to include class changes (current slide) and CSS properties that worked perfectly with my version of fancybox3. Hopefully, this can benefit someone else as well.

Just a heads up: you have the option to substitute the "Rotate" text with an icon.

// Function to add a custom item to fancybox menu for image rotation
$(document).on('onInit.fb', function (e, instance) {
    if ($('.fancybox-toolbar').find('#rotate_button').length === 0) {
        $('.fancybox-toolbar').prepend('<button id="rotate_button" class="fancybox-button" title="Rotate Image">Rotate</button>');
    }
    var click = 1;
    $('.fancybox-toolbar').on('click', '#rotate_button', function () {
            var n = 90 * ++click;
            $('.fancybox-slide--current img').css('webkitTransform', 'rotate(-' + n + 'deg)');
            $('.fancybox-slide--current img').css('mozTransform', 'rotate(-' + n + 'deg)');
            $('.fancybox-slide--current img').css('transform', 'rotate(-' + n + 'deg)');
        });
});

If you're facing a similar issue, check out this Github thread: https://github.com/fancyapps/fancybox/issues/1100

After testing user seltix5's code in fancybox v3 myself, I can confirm that it works perfectly.

All you have to do is add his/her code to your fancybox.js file. This code enhances the fancybox object with a rotate feature triggered after the "onInit.fb" event. It even includes rotating buttons on the top menu along with a smooth animation for rotation.