Using A-frame with three.js will affect three.js?

This is because aframe bundles three.js so the global variable window.THREE is redefined in aframe.js. The original three.js, the one TrackballControls and CSSRenderer were loaded into, is no longer accessible after loading aframe.js.

You can see that if you do something like this:

<script src="https://threejs.org/build/three.js">
</script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
  window._THREE = THREE;
  delete window.THREE;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>

<script>
  console.log(_THREE.REVISION, THREE.REVISION);
</script>

So changing the order (and not loading three.js again) should help you here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

However, you should be aware that aframe is using a different three.js-version which might cause conflicts with the latest version from the examples-page.

Another related thing to note is that aframe can not work with the css3d-renderer, because DOM-elements can not be shown in WebVR.