小程序
小游戏
企业微信
微信支付
扫描小程序码分享
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
开源小程序动画库封装swiper
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
已经做完了
可以做,用动画试试
做完了
有个思路就是用transform的3D转换,有点类似一个正方体;
例子
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a1{
width: 200px;
height: 200px;
margin: 100px auto;
/*border: 1px solid #000;*/
transform-style: preserve-3d;
transform-origin: 50% 50%;
position: relative;
transform: rotateX(45deg) rotateY(45deg);
}
.a1 div{
position: absolute;
top: 0;
left: 0;
.b1{
background-color: red;
transform: translateX(-100px) rotateY(-90deg);
.b2{
background-color: orange;
transform: translateX(100px) rotateY(-90deg);
.b3{
background-color: yellow;
transform: translateY(-100px) rotateX(-90deg);
.b4{
background-color: green;
transform: translateY(100px) rotateX(-90deg);
.b5{
background-color: blue;
transform: translateZ(-100px);
.b6{
background-color: purple;
transform: translateZ(100px);
</style>
</head>
<body>
<div class="a1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
挺有意思的.. 我之前做了一个 但是是横向的.. 炫是很炫.. 但是不足.. 打算用animation 试试.
我跟霄霄聊天在下面. 你看看 我做了一个. 嘿嘿..
哈哈哈你试试,我现在在自己研究一下以前学过的这个东西
我准备搞一搞.. 旋转效果.
我搞了个正方体360°旋转只不过公式没算好
转过去的图,在背后还能看见吗?还是说是消失掉呢
老哥 又遇到你了.
看得到.
一模一样的效果.. 其实我做了一个的..老板不满意..
如果说是背面的话 就看不到 一共显示三张.
是一种旋转的立体感.. 感觉到无力
理论上讲 一般h5怎么实现的 小程序就能用类似的方法实现
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
开源小程序动画库封装swiper
已经做完了
可以做,用动画试试
做完了
有个思路就是用transform的3D转换,有点类似一个正方体;
例子
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a1{
width: 200px;
height: 200px;
margin: 100px auto;
/*border: 1px solid #000;*/
transform-style: preserve-3d;
transform-origin: 50% 50%;
position: relative;
transform: rotateX(45deg) rotateY(45deg);
}
.a1 div{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.b1{
background-color: red;
transform: translateX(-100px) rotateY(-90deg);
}
.b2{
background-color: orange;
transform: translateX(100px) rotateY(-90deg);
}
.b3{
background-color: yellow;
transform: translateY(-100px) rotateX(-90deg);
}
.b4{
background-color: green;
transform: translateY(100px) rotateX(-90deg);
}
.b5{
background-color: blue;
transform: translateZ(-100px);
}
.b6{
background-color: purple;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="a1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
挺有意思的.. 我之前做了一个 但是是横向的.. 炫是很炫.. 但是不足.. 打算用animation 试试.
我跟霄霄聊天在下面. 你看看 我做了一个. 嘿嘿..
哈哈哈你试试,我现在在自己研究一下以前学过的这个东西
我准备搞一搞.. 旋转效果.
我搞了个正方体360°旋转只不过公式没算好
转过去的图,在背后还能看见吗?还是说是消失掉呢
老哥 又遇到你了.
看得到.
一模一样的效果.. 其实我做了一个的..老板不满意..
如果说是背面的话 就看不到 一共显示三张.
是一种旋转的立体感.. 感觉到无力
理论上讲 一般h5怎么实现的 小程序就能用类似的方法实现