CSS3 特效旋转木马

最新推荐文章于 2024-04-11 16:21:48 发布

一麻袋小猫

最新推荐文章于 2024-04-11 16:21:48 发布

阅读量307

点赞数

分类专栏： CSS特效文章标签： css css3 html5

本文链接：https://blog.csdn.net/Zmongo/article/details/104249210

版权

CSS特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body {
		perspective: 800px;
	}
		section {
			position: relative;
			width: 300px;
			height: 200px;
			margin: 150px auto; 
			transform-style: preserve-3d;
			/*因为是自动旋转，不是鼠标悬浮旋转，添加动画效果*/
			animation: rotate 15s linear infinite; 
		}
		section:hover {
			/*鼠标放上去暂停*/
			animation-play-state: paused;
		}
		@keyframes rotate {
			0% {
				transform: rotateY(0);
			}
			100% {
				transform: rotateY(360deg);
			}
		}
		section div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url(images/1_1.png) no-repeat;
		}
		section div:nth-child(1) {
			transform: translateZ(300px);
		} 
		section div:nth-child(2) {
			/*先旋转好了再移动距离*/
			transform: rotateY(60deg) translateZ(300px);
		}
		section div:nth-child(3) {
			/*先旋转好了再移动距离*/
			transform: rotateY(120deg) translateZ(300px);
		}
		section div:nth-child(4) {
			/*先旋转好了再移动距离*/
			transform: rotateY(180deg) translateZ(300px);
		}
		section div:nth-child(5) {
			/*先旋转好了再移动距离*/
			transform: rotateY(240deg) translateZ(300px);
		}
		section div:nth-child(6) {
			/*先旋转好了再移动距离*/
			transform: rotateY(300deg) translateZ(300px);
		}
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>

一麻袋小猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS3 特效旋转木马

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { perspective: 800px; } section { position: r...
复制链接

扫一扫