Получить стиль из css, JavaScript

Я делаю 3D-анимацию на JavaScript в актуальном стиле. Я создаю рабочий код, но я не могу запустить код, если стиль находится в расширенном файле CSS, поэтому код запускается только тогда, когда стиль написан в коде HTML. Есть выход?

Рабочий код(также на скрипке):

HTML

<div id = "background">
   <div class = "example" style = "transform-origin: 50% 50% -200px">
      <p class = "num">Example</p>
   </div>
<div>

CSS

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 80px;
}

#background{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;    
}

.example:nth-child(1){
   transform: perspective(200px);
   transform-origin: 50% 50% -200px;
}


.background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-style: solid;

}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;


}

JavaScript

setInterval(function(){ move()}, 2000);

function move(){    
   var elem = document.getElementsByClassName("example");
   var str = elem[0].style.transformOrigin;
   var res = str.split(" ");
   var pos = res[2].replace(/px/g, " ");
   var id = setInterval(frame, 20);

   function frame(){
     if (pos==500){
     clearInterval(id);
   }
   else {
    pos++;
    elem[0].style.transformOrigin = "50% 50%"+pos+"px";
   }
 }                                                                      
}

Как видите, все работает, но когда я удаляю стиль из HTML-кода. Я вижу ошибку в консоли: не удается прочитать свойство «заменить» неопределенного