Why Isn't This Element Rotation Working

Why isn't this element rotation working?

Your current markup works, the problem is that you have to enable legacy filters in IE10 to properly render your results in IE10 running in IE8-mode.

So, the answer then is to enable legacy filters: http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx

Go to "Settings [Gear]" >> "Internet Options" >> "Security"
Then click "Custom Level" and scroll way down in the resulting window-pane to find the "Render legacy filters" option. Enable it.

Enable legacy filters in IE10

CSS Rotate inside rotated element not working

Put a display: block; on your span in order to rotate it.

CSS3 transform not working

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.

Why isn't my arrow rotating downwards in css ( The span in there)

Set the display to inline-block.

.downArrow {
  color: #ee5f22;
  transform: rotate(90deg);
  display: inline-block;
}

Inline elements are not transformable. According to the specification:

A transformable element is an element in one of these categories:
all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&family=Poppins:wght@100;200;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: beige;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 110px;
  margin-left: 150px;
  margin-top: 10px;
}

nav ul li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 20;
  padding-right: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
}

nav ul li:hover {
  font-weight: 700;
}

.cta a {
  text-decoration: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn-primary {
  margin-top: 2.1rem;
  margin-left: 0;
  margin-right: 8rem;
  margin-bottom: 40px;
  padding: 1rem;
  background-color: #ee5f22;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border-radius: 7%;
  font-size: 1.1rem;
  padding: 0px 20px;
  border: none;
}

.btn-primary:hover {
  border: 1.5px solid black;
  cursor: pointer;
}

.downArrow {
  color: #ee5f22;
  transform: rotate(90deg);
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ Digital Agency</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
        <header>
        <div class="navbar">
            <div class="container">
                    <img src="imgs/Logo.png" alt="Sample Image" class="img">

                <nav>
                    <ul>
                        <li><a href="index.html"></a>Home</li>
                        <li><a href="whowehelp.html"></a>Who We Help</li>
                        <li>
                            <a href="services.html"></a>Services
                            <span class="downArrow">></span>
                        </li>
                        <li><a href="technology.html"></a>Technology</li>
                        <li><a href="company.html"></a>Company</li>
                        
                    </ul>
                </nav>

                <div class="cta"></div>
                <button class="btn btn-primary">Contact Us</button>
                </div>
            </div>
        </header>

    <script src="main.js"></script>
</body>
</html>

translate3d() & rotateY() working, but perspective-origin not working... why?

The order in the transform functions is important

They are applied from right to left, so this

transform:  translate3d(0px,0px,0px) rotateY(45deg) perspective(100px);

applies the perspective when the element isn't rotated, so it doesn't show.

It should be

transform:  perspective(100px) translate3d(0px,-50px,0px) rotateY(45deg);

first rotate, then translate and then apply the perspective

fiddle

This applies the perspective (or, better say, the perspective applied is noticeable). But since it applies it to the translated element, it is not centered.

If you want it centered, apply the perspective before the translatiion. Notice that the transform is evaluated right to left, so before means afterwards in the list

transform: translate3d(0px,-50px,0px) perspective(600px) rotateY(80deg);

Notice that perspective-origin is useless when applying perspective as a function instead of a property.

fiddle

Why does margin-top not work relative to a rotated element?

You're thinking the area above "top" of 50% is the actual top of the element, this is not correct. Because you have a position of "absolute" on .rotated, and a "top" of 50%, this becomes the new "top" to the element. Adding the margin: 10px; is adding the margin to the top of the element as it should. The "visual top" and "actual top" are one in the same.

Edit:
If you use any front-end tools (Firebug is my tool of choice), you can over over the element to see this in action.

whet CSS pseudo element is not rotating

set display inline-block.

.span1::before{
   content: "\25B6";
   color: black;
   display: inline-block;
}

Image transform rotate not rotating

The cross moves up (and to the right) because of the translate transform that you are adding when it is being hovered. I believe you are adding this to center the element and in that case, it is better that it is added to the default state of the element itself.

The rotate is actually happening but you aren't seing it because a 180deg rotate of a cross gives the same output. You can add a transition to see the rotation (or) change the rotation angle.

.black {

  background: #000;

  width: 100%;

  height: 400px;

}

.popup-close {

  position: absolute;

  top: 40px;

  right: 40px;

}

#x-close {

  transform: translate(50%, -50%);

  transition: transform 1s ease;

}

#x-close:hover {

  -webkit-transform: translate(50%, -50%) rotate(180deg);

  transform: translate(50%, -50%) rotate(180deg);

}

<div class="black">

  <a class="popup-close" data-popup-close="popup-1" href="#">

    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="Sample Image" height="40px" width="40px" id="x-close">

  </a>

</div>

Rotating arrow issue

Reason

Contrary to what was originally mentioned in the other answer, the problem is not because the class is added to the i element. Instead it is because of the display setting of the elements.

CSS transform does not work on inline elements. They work only on elements whose display is block, inline-block, inline-table etc. Below is an extract from the W3C Spec:

transformable element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

atomic inline-level element

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes

By default most browsers set i element as display: inline. So, when the transform is applied to it (through the rotate class), it has no effect at all. That is, the element doesn't rotate (and so, the pseudo-element also remains un-rotated).

It works when you directly set the transform to rotate:before because all pseudo-elements have their display set as inline-block by most browsers.

Solution

Change the display of i element to be inline-block. This would mean that the rotate transform would actually have an effect.

When you add a transform to an element all its child elements (which includes pseudo-elements) will be affected by the transform and so there is no need to set the class to the pseudo-element.

var action = "click";

var speed = 500;

$(document).ready(function() {

  $('li.q').on(action, function() {

    $(this).next()

      .slideToggle(speed).

    siblings('li.a').

    slideUp();

    var i = $(this).children('i');

    $('i').not(i).removeClass('rotate');

    i.toggleClass('rotate');

  });

});

.rotate {

  transform: rotate(90deg);

}

/* add this setting */

i {

  display: inline-block;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="q"><i class="ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

<li class="a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

Why Isn't This Element Rotation Working