Как вращать элемент вдоль горизонтальной оси

на css

    @keyframes rotate {

        100% {

            transform: rotate(360deg);

        }

    }

    #myblock {

        animation-name: rotate;

        animation-duration: 3s;

        width:200px;

        height: 200px;

        border:2px dashed #ccc;        

    }

viКing, Спасибо, однако я не это имел в виду. В вашем примере вращение происходит в плоскости экрана вправо вокруг точки центра тяжести объекта. А мне нужно вращение назад вокруг центральной горизонтальной оси.

поменяйте направление вращения transform: rotateX(180deg);

viКing, ТС имеет в виду ось вращения, лежащую в плоскости экрана, а не перпендикулярную ей.

В графических редакторах это называется "flip". Видимо, ТС хочет тоже самое, только плавно, с заданной скоростью и коэффициентом перспективы :)

transform: rotate3d(1,0,0,180deg);

Спасибо, вот оно!

Кстати это не работает в internet explorer

В 10 и 11 должно работать.

в 11 проверяла не работает...в хроме, опере,мозиле работает

В семье не без уродов. За IE не заржавеет.