transform: translate3d(300px, 0, 0) rotateY(-15deg) rotateX(-15deg) rotateZ(-15deg);
x轴偏移300px xyz三个轴线各旋转-15度
rotateX 沿着屏幕横向轴旋转
rotateY 沿着屏幕竖直方向轴旋转
rotateZ 沿着屏幕垂直方向轴旋转
transform-style: preserve-3d;
让转换的子元素保留3D转换：
transform-origin: 0% 50%;
旋转中心 x轴起始点 y轴50%位置
一个简单的实例：
<style>
.shopCart{
position: fixed;
bottom:0;
left: 0;
width:100%;
height:50px;
background: #000;
}
.content {
color: #fff;
}
.detail {
position: absolute;
top:0;
left:0;
width:120px;
color: #ff0b20;
transform: translate3d(0,-10%,0);
/* 后续添加 */
}
.move{
transform: translate3d(0,-150%,0); /* 相对x y z 轴的位置 */
transition:transform 2s ease-out; /* 设置四个过渡属性的设置*/
-moz-transition:transform 2s ease-out; /* Firefox 4 */
-webkit-transition:transform 2s ease-out; /* Safari and Chrome */
-o-transition:transform 2s ease-out; /* Opera */
}
</style>
<div class="shopCart">
<div class="content">我是购物车层</div>
<div class="detail" style="display:block">我是购物车详情页（弹出层）
166666666666666666666
1666666666666666666666
16666666666666111111116
我是购物车详情页（弹出层）</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
window.onload = function(){
var shopcart = document.querySelector('.shopCart');
var detail = document.querySelector('.detail');
shopcart.onclick = function(){
// detail.style.display='block';
detail.style.transform = "translate3d(0,-150%,0)";
detail.style.transition = "transform 2s ease-out";
/*detail.css({
"-webkit-transition": "-webkit-transform 0s ease-out",
"-webkit-transform": "translate3d(0, " + -150% + "px, 0)"
}) */
}
}
</script>
