box-direction 属性用于改变容器的显示顺序,使之反向排列。默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。下面来看看box-direction：
reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边
图片你自己加 我用背景色替代了背景图<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.x-stage{
margin:150px auto auto
width:100px
}
.x-box{
margin:0
padding: 0
border: 0
position:relative
height:100px
background-color:black
}
.x-box-item{
list-style:none
width:100px
height:100px
position:absolute
top:0
left:0
}
.x-box-item-west{
background-color:green
transform-origin:0 0
/*transform:rotate(90deg)*/
}
.x-box-item-east{
background-color:red
transform-origin:100% 100%
/*transform:rotate(90deg)*/
}
.x-box-item-north{
background-color:blue
transform-origin:100% 0
/*transform:rotate(90deg)*/
}
.x-box-item-south{
background-color:orange
transform-origin:0 100%
/*transform:rotate(90deg)*/
}
.x-rotate{
transform:rotate(90deg)
}
</style>
<script>
window.onload = function(){
var ls = document.getElementsByTagName('li')
var len = ls.length
var task = setInterval(function(){
if(len<0)
return clearInterval(task)
ls[--len].className += ' x-rotate'
},1000)
}
</script>
</head>
<body>
<div class="x-stage">
<ul class="x-box">
<li class="x-box-item x-box-item-west"></li>
<li class="x-box-item x-box-item-east"></li>
<li class="x-box-item x-box-item-north"></li>
<li class="x-box-item x-box-item-south"></li>
</ul>
</div>
</body>
</html>
*a-锚点\x0d\x0a*abbr-缩写\x0d\x0a*acronym-首字\x0d\x0a*b-粗体(不推荐)\x0d\x0a*bdo-bidioverride\x0d\x0a*big-大字体\x0d\x0a*br-换行\x0d\x0a*cite-引用\x0d\x0a*code-计算机代码(在引用源码的时候需要)\x0d\x0a*dfn-定义字段\x0d\x0a*em-强调\x0d\x0a*font-字体设定(不推荐)\x0d\x0a*i-斜体\x0d\x0a*img-图片\x0d\x0a*input-输入框\x0d\x0a*kbd-定义键盘文本\x0d\x0a*label-表格标签\x0d\x0a*q-短引用\x0d\x0a*s-中划线(不推荐)\x0d\x0a*samp-定义范例计算机代码\x0d\x0a*select-项目选择\x0d\x0a*small-小字体文本\x0d\x0a*span-常用内联容器，定义文本内区块\x0d\x0a*strike-中划线\x0d\x0a*strong-粗体强调\x0d\x0a*sub-下标\x0d\x0a*sup-上标\x0d\x0a*textarea-多行文本输入框\x0d\x0a*tt-电传文本\x0d\x0a*u-下划线\x0d\x0a*var-定义变量
