TL;DR
Adicione o prefixo -webkit-
.
.body-element-p1{
top: 11%;
left: 41%;
position: absolute;
z-index: 10;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
Complemento
Esses prefixos foram adicionados às propriedades para que os desenvolvedores pudessem experimenta-las, já que — em teoria — não deveria haver mudança visual.
Os desenvolvedores devem esperar para incluir a propriedade não pré-fixada até que o comportamento do navegador seja padronizado.¹
Segundo o site da Mozilla:
Os fabricantes de browsers estão trabalhando para parar de usar prefixos de fornecedores para recursos experimentais. Os desenvolvedores da Web têm vindo a usá-los em sites de produção, apesar de sua natureza experimental. Isso tornou mais difícil para os fornecedores de navegadores garantir a compatibilidade e trabalhar com novos recursos; também foi prejudicial aos navegadores menores que acabam forçados a adicionar prefixos de outros navegadores para carregar sites populares.
Qual ordem usar?
Na pergunta Ordenar estilos com prefixos no CSS (informada pelo @dvd), não há explicações do por quê você deve usar uma determinada ordem, mas isso acontece pois os navegadores leem essas propriedades na ordem que você colocar. Porém isso é relativo (como mostrado abaixo).
Acontece pois os navegadores utilizam esses prefixos para (como foi dito anteriormente) coisas experimentais e por isso eles processam essas informações de modo diferente. Portanto, você deve verificar qual a melhor forma de utilizar. Exemplos:
Modo Correto:
#rightway { background: #ccc; padding: 30px;
/* Navegador vai tentar aplica-lo */
-webkit-border-radius: 30px 10px;
/* Porém não vai conseguir, pois essa propriedade irá substituir a anterior. */
border-radius: 30px 10px;
}
Modo Correto ²:
#wrongway { background: #ccc; padding: 30px;
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px 30px 10px;
}
Nos modos corretos o navegador irá interpretar a última propriedade da seguinte maneira:
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 10px;
Modo Incorreto:
#wrongway { background: #ccc; padding: 30px;
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
Nesse modo, o navegador irá substituir a propriedade "real" border-radius
, pela propriedade prefixada, porém, a interpretação do navegador será uma borda elíptica. Ex:
border-top-left-radius: 30px 10px;
border-top-right-radius: 30px 10px;
border-bottom-right-radius: 30px 10px;
border-bottom-left-radius: 30px 10px;