小程序实现蜂巢效果和翻转效果
1.实现蜂巢效果
具体代码:
<view class="boxF">
<view class="boxS">
<view class="boxT"
style="background-image: url(https://img0.baidu.com/it/u=4178574788,2181122894&fm=15&fmt=auto&gp=0.jpg);">
</view>
</view>
</view>
样式:
.boxF,
.boxS,
.boxT,
{
width: 120rpx;
height: 150rpx;
overflow: hidden;
}
.boxF,
.boxS {
visibility: hidden;
}
.boxF {
transform: rotate(120deg);
/* float: left; */
/* margin-left: 10px; */
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.boxS {
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT {
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
实现原理:
这个效果的主要css样式有:
1.>transform: rotate(120deg); 图片旋转
2.>overflow:hidden; 超出隐藏
3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度,第三层(boxT)再旋转-60度,此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility:
hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible;
(ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility:
hidden; )。经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是div的宽高比例必须满足4:5,不然得到的就不是6边形了。
2.同时实现反转效果
<template>
<view class="flip-container">
<view class="flipper" @click="active =!active" :class="{'active':active}">
<view class="">
<view class="boxF">
<view class="boxS">
<view class="boxT"
style="background-image: url(https://img0.baidu.com/it/u=4178574788,2181122894&fm=15&fmt=auto&gp=0.jpg);">
</view>
</view>
</view>
</view>
<view class="back">
<view class="boxF">
<view class="boxS">
<view class="boxT"
style="background-image: url(https://img2.baidu.com/it/u=1067333817,2824303445&fm=26&fmt=auto&gp=0.jpg);">
</view>
</view>
</view>
</view>
</view>
</view>
</template>
样式:
<style lang="scss" scoped>
.boxF,
.boxS,
.boxT,
{
width: 120rpx;
height: 150rpx;
overflow: hidden;
}
.boxF,
.boxS {
visibility: hidden;
}
.boxF {
transform: rotate(120deg);
/* float: left; */
/* margin-left: 10px; */
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.boxS {
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT {
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
.flip-container {
perspective: 1000;
}
.active {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}
</style>
参考文章:
css实现6边形:https://www.cnblogs.com/wwlhome/p/5970442.html
css反转效果:CSS图片翻转动画技术详解