css3旋转门

最新推荐文章于 2024-07-24 13:52:24 发布

野爹玛卡巴卡

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量267

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/qq_42201141/article/details/103834470

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<style type="text/css">
	body{
		height: 100vh;
		margin: 0;
		perspective: 2000px;
		perspective-origin: 100px 100px;
		transform-style: preserve-3d;
	}
	.father{
		width: 300px;
		height: 300px;
		position: absolute;
		top: calc(50% - 150px);
		left: calc(50% - 150px);
		transform-style: preserve-3d;
		animation: round 6s linear infinite;
	}
	.contain{
		width: 300px;
		height: 300px;
		position: absolute;
		background-size:cover ;
	}
	.contain:nth-of-type(1){
		background-image: url(img/1.jpg);
		transform: rotateY(60deg) translateZ(350px);
	}
	.contain:nth-of-type(2){
		background-image: url(img/2.jpg);
		transform: rotateY(120deg) translateZ(350px);
	}
	.contain:nth-of-type(3){
		background-image: url(img/3.jpg);
		transform: rotateY(180deg) translateZ(350px);
	}
	.contain:nth-of-type(4){
		background-image: url(img/4.jpg);
		transform: rotateY(240deg) translateZ(350px);
	}
	.contain:nth-of-type(5){
		background-image: url(img/5.jpg);
		transform: rotateY(300deg) translateZ(350px);
	}
	.contain:nth-of-type(6){
		background-image: url(img/6.jpg);
		transform: rotateY(360deg) translateZ(350px);
	}
	@keyframes round{
		0%{
			transform: rotateY(0deg) rotateX(0deg);
		}
		50%{
			transform: rotateY(180deg) rotateX(30deg);
		}
		100%{
			transform: rotateY(360deg) rotateX(0deg);
		}
	}
</style>

<body>
	<div class="father">
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
		<div class="contain"></div>
	</div>
	<script>
		document.body.onmousemove = function(e){
			this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px" ;
		}
	</script>
</body>

野爹玛卡巴卡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3旋转门

<style type="text/css"> body{ height: 100vh; margin: 0; perspective: 2000px; perspective-origin: 100px 100px; transform-style: preserve-3d; } .father{ width: 300px; height: 300p...
复制链接

扫一扫

专栏目录