收藏
回答

css3中的perspective 属性在调试基础库3.1.5版本及以上都无法生效。

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); }
}
回答关注问题邀请回答
收藏
登录 后发表内容