<template>
	<view class="body">
		<view class="gallery">
		<span style="--i:1">
			<image src="../src/assets/20160317110541_35459.jpg" mode=""></image>
		</span>
		<span style="--i:2">
      <image src="../src/assets/20160317110541_35459.jpg" mode=""></image>

		</span>
		<span style="--i:3">
      <image src="../src/assets/20160317110541_35459.jpg" mode=""></image>

		</span>
		<span style="--i:4">
      <image src="../src/assets/20160317110541_35459.jpg" mode=""></image>

		</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style >
.body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background-color:#010101;
}
.gallery{
  position:relative;
  width:300px;
  height:200px;
  transform-style:preserve-3d;
  animation:rotate 15s linear infinite;
}

@keyframes rotate{
  from{
    transform:perspective(1200px) rotateY(0deg);
  }
  
  to{
    transform:perspective(1200px) rotateY(360deg);
  }
}

.gallery span{
  position:absolute;
  width:100%;
  height:100%;
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 90deg)) translateZ(180px);
}

.gallery span image{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}
</style>
