小程序实现蜂巢效果和翻转效果

小程序实现蜂巢效果和翻转效果

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图片翻转动画技术详解