本文共 4363 字，大约阅读时间需要 14 分钟。

html+css写的3D旋转图

1、html代码

2、css样式代码

@charset "utf-8";*{
   	margin:0;	padding:0;}body{
   		/*background: url(../img/preview.png) ;*/	max-width: 100%;	min-width: 100%;	height: 100%;	background-size: cover;	background-repeat: no-repeat;	background-attachment: fixed;	background-size:100% 100%;	position: absolute;	margin-left: auto;	margin-right: auto;}li{
   	list-style: none;}.box{
   	width:200px;	height:200px;	background-size: cover;	background-repeat: no-repeat;	background-attachment: fixed;	background-size:100% 100%;	position: absolute;	margin-left: 42%;	margin-top: 22%;	-webkit-transform-style:preserve-3d;	-webkit-transform:rotateX(13deg);	-webkit-animation:move 5s linear infinite;}.minbox{
   	width:100px;	height:100px;	position: absolute;	left:50px;	top:30px;	-webkit-transform-style:preserve-3d;}.minbox li{
   	width:100px;	height:100px;	position: absolute;	left:0;	top:0;}.minbox li:nth-child(1){
   	background: url(../img1/001.png) no-repeat 0 0;	-webkit-transform:translateZ(50px);}.minbox li:nth-child(2){
   	background: url(../img1/002.png) no-repeat 0 0;	-webkit-transform:rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3){
   	background: url(../img1/003.png) no-repeat 0 0;	-webkit-transform:rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4){
   	background: url(../img1/004.png) no-repeat 0 0;	-webkit-transform:rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5){
   	background: url(../img1/005.png) no-repeat 0 0;	-webkit-transform:rotateY(-90deg) translateZ(50px);}.minbox li:nth-child(6){
   	background: url(../img1/006.png) no-repeat 0 0;	-webkit-transform:rotateY(90deg) translateZ(50px);}.maxbox li:nth-child(1){
   	background: url(../img1/10.png) no-repeat 0 0;	-webkit-transform:translateZ(50px);}.maxbox li:nth-child(2){
   	background: url(../img1/20.png) no-repeat 0 0;	-webkit-transform:translateZ(50px);}.maxbox li:nth-child(3){
   	background: url(../img1/30.png) no-repeat 0 0;	-webkit-transform:rotateX(-90deg) translateZ(50px);}.maxbox li:nth-child(4){
   	background: url(../img1/40.png) no-repeat 0 0;	-webkit-transform:rotateX(90deg) translateZ(50px);}.maxbox li:nth-child(5){
   	background: url(../img1/50.png) no-repeat 0 0;	-webkit-transform:rotateY(-90deg) translateZ(50px);}.maxbox li:nth-child(6){
   	background: url(../img1/60.png) no-repeat 0 0;	-webkit-transform:rotateY(90deg) translateZ(50px);}.maxbox{
   	width: 800px;	height: 400px;	position: absolute;	left: 0;	top: -20px;	-webkit-transform-style: preserve-3d;	}.maxbox li{
   	width: 200px;	height: 200px;	background: #fff;	border:1px solid #ccc;	position: absolute;	left: 0;	top: 0;	opacity: 0.2;	-webkit-transition:all 1s ease;}.maxbox li:nth-child(1){
   	-webkit-transform:translateZ(100px);}.maxbox li:nth-child(2){
   	-webkit-transform:rotateX(180deg) translateZ(100px);}.maxbox li:nth-child(3){
   	-webkit-transform:rotateX(-90deg) translateZ(100px);}.maxbox li:nth-child(4){
   	-webkit-transform:rotateX(90deg) translateZ(100px);}.maxbox li:nth-child(5){
   	-webkit-transform:rotateY(-90deg) translateZ(100px);}.maxbox li:nth-child(6){
   	-webkit-transform:rotateY(90deg) translateZ(100px);}.box:hover ol li:nth-child(1){
   	-webkit-transform:translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}.box:hover ol li:nth-child(2){
   	-webkit-transform:rotateX(180deg) translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}.box:hover ol li:nth-child(3){
   	-webkit-transform:rotateX(-90deg) translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}.box:hover ol li:nth-child(4){
   	-webkit-transform:rotateX(90deg) translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}.box:hover ol li:nth-child(5){
   	-webkit-transform:rotateY(-90deg) translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}.box:hover ol li:nth-child(6){
   	-webkit-transform:rotateY(90deg) translateZ(300px);	width: 400px;	height: 400px;	opacity: 0.8;	left: -100px;	top: -100px;}@keyframes move{
   	0%{
   		-webkit-transform: rotateX(13deg) rotateY(0deg);	}	100%{
   		-webkit-transform:rotateX(13deg) rotateY(360deg);	}}

转载地址：https://jiangwenxin.blog.csdn.net/article/details/107028442 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！