css3中的perspective 属性
在微信开发者工具中任何基础库版本都显示正常,但是在微信移动客户端中基础库3.1.5版本及以上都无法生效
<view class="scene">
<view class="cube">
<!-- 立方体的六个面 -->
<view class="face front"></view>
<view class="face back"></view>
<view class="face left"></view>
<view class="face right"></view>
<view class="face top"></view>
<view class="face bottom"></view>
</view>
</view>
.scene {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.face {
position: absolute;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #ccc;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.front { transform:translateZ(90px); }
.back { transform:rotateY(180deg) translateZ(90px); }
.left { transform:rotateY(-90deg) translateZ(90px); }
.right { transform:rotateY(90deg) translateZ(90px); }
.top { transform:rotateX(90deg) translateZ(90px); }
.bottom { transform:rotateX(-90deg) translateZ(90px); }
@keyframes rotate {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(0deg) rotateY(360deg); }
}