CSS3中的background-origin属性值为：
padding-box：背景图像相对于内边距框来定位。
border-box：背景图像相对于边框盒来定位。
content-box：背景图像相对于内容框来定位。
原点设置一次即可，不需要多次设置，只要在转180度以后，再次旋转180度（也就是从180度转到360度）即可，继续累加就继续转（可以超过360度）。比如：
<style>div {
position:absolute
left:200px
top:200px
transform-origin:-30px center
transition:all 1s
}
</style>
<button>旋转180度</button>
<div>文字A</div>
<script>
var jd=0
window.onload=function(){
document.querySelector("button").onclick=function(){
jd+=180
document.querySelector("div").style.transform="rotate("+jd+"deg)"
}
}
</script>
透视效果是依赖于人眼来产生的，而人眼的可视范围大概在120度左右，3D物体处在这个范围内产生的透视效果才是真实的，超出这个范围（比如说物体是放在你耳朵边的），人眼看不到了，自然就不会有什么透视效果了，假如这个时候又强行利用电脑手段把这个并不存在的逗透视效果地用图片表现出来，就肯定会出现严重的变形。因此那个属性的x或y值不能设置得太大。你可以自己测试一下：你把手机横着贴在耳边，这时候你的眼睛只能看到手机的一小部分，大部分是看不到的，这时候你看到的手机的透视效果（尽管只有一小部分，而且很模糊，因为它不在你的视觉中心）是真实的，但假如现在要把看不见的那一大部分也用图片表现出来，你脑子里能想象出应该是什么样子吗看
