A demo of rotating text to vertical angle

jQuery, CSS and HTML
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.shadow-effects{
    font-size:80px;
    font-weight:bold;
    color: transparent;
    letter-spacing: .10em;
    text-shadow: -9px -8px 2px rgba(193, 94, 221, 0.43),1px -1px 0 #fe6161, 2px 1px 3px #737272,3px 3px 1px #37408C;
}   
@media only screen and (max-width: 767px) {
    .shadow-effects{
        font-size: 30px;
    }
}
@media only screen and (max-width: 479px) {
    .shadow-effects{
        font-size: 24px;
    }
}
</style>

</head>

<body>
<div class="container">
    <p>Click on text</p>
    <div class="row" id="animate-demo3">

        <div class="col-md-8">
            <span class="shadow-effects">Text Rotate</span>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/jquery-rotate/rotate.js"></script>

<script>
$('#animate-demo3').on('click', function () {

    if (!$(this).is(':animated')) {
        $(".complete").remove();
        $(this).after("<div class='ani-status'>The text is animating</div>");
    }

    $(this).rotate(270, {
        duration: 2000,
        easing: 'swing',
        complete: function() {
            $(".ani-status").remove();
            $(this).after("<div class='complete'>Animation is done!</div>");
        }
    });

});

</script>
</body>
</html>
Click on text
Text Rotate