How to rotate text in a span so it rotates around it center and not its right corner

Question

I have an FAQ section. Each question is preceded by a green triangle as shown below:

Clicking on the green triangle turns the triangle 90 degrees. However, it does not rotate around the center of the triangle. Instead it rotates around the right corner. See how its shifted to the right because of this.

I have tried tried tansform-origin but it seems to move the center too far even if I use %.

Here is the HTML:

    <div class="question-container">
        <div class="question">
        <p><span class="triangle">▸</span> Why choose ProveWord?</p>
        </div><!--question -->
        <div class="answer">
            <p>ProvenWord does all that is necessary to make your work its best. That is why we always perform proofreading andediting on your document.</p>
        </div><!-- answer -->
    </div><!-- question-container -->

Here is the CSS:

.question-container {
    width: 450px;
    margin: 0 auto;
}

.question {
    height: 36px;
    background-color: #efefef;
    border-radius: 8px;

    text-align: left;
    margin-bottom: 10px;
}

.question p {
    line-height: 34px;
    padding-bottom: 10px;
}

.triangle {
    font-size: 18px;
    color: #608b32;
    padding: 0 8px 0 12px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.5s ease-in-out;

}

.triangle.rotate {
    color: red;
    transform: rotate(90deg);
}

.answer {
    width: 85%;
    display: none;
    margin: 0 auto;
}

.answer p {
    line-height: 130%;
    text-align: justify;
    padding-bottom: 20px;
}

Here is the JS:

$('.triangle').on('click', function(){

    var self = $(this).closest('.question-container').find('.answer');
    vis  = $('.answer').not(self).filter(':visible');

        if (vis.length) {
        vis.slideUp(function() {
            vis.closest('.question-container').find('.triangle').toggleClass('rotate');
            self.slideToggle('slow');

        });
    }else{
        self.slideToggle('slow');        
    }
    $(this).toggleClass('rotate');  
});

I'm a NOOB with the CSS and rotation. Any help appreciated.

Answer 1

The answer of @Theo is fine, but you should know that you can achieve a similar result in (at least) two other ways:

Without JavaScript: (you will have to reskin the checkbox into the arrow you desire)

input ~ p {
  display: none;
}

input:checked ~ p {
  display: block;
}

<label>wesh</label><input type="checkbox"/>
  <p>
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  </p>

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

More on MSDN

Or even better,

Without JavaScript nor CSS:

<details>
<summary>wesh</summary>
  <p>
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  dfsdfsf
  </p>
</details>

The HTML Details Element () is used to create a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the element.

More on msdn

Demo on jsfiddle

Answer 2

Here is how I would have done it, with a little JavaScript I made a Fiddle for you I created a button over your<div class='question'> JavaScript gets the event on click and adds the class rotate to your triangle element. Clicking again on it removes the class and it becomes green again.

HTML :

<a href="#" id="button">
      <div class="question">
        <p><span class="triangle">▸</span> Why choose ProveWord?</p>
      </div>
</a><!--question -->

CSS :

.triangle {
  font-size: 18px;
  color: #608b32;
  padding: 0 8px 0 12px;
  display: inline-block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.triangle.rotate {
  color: red;
  -webkit-transform:rotate(90deg); 
  -ms-transform:rotate(90deg);
}

JavaScript :

$("#button").click(function() {
    $(".triangle").toggleClass('rotate');
});