你还在愁女朋友的生日礼物吗，来啦，3D旋转图：
运用图片：111.jpg，222.jpg
111.jpg：
222.jpg：
HTML代码：
<html> <head> <meta charset="utf-8" /> <title>3Dboxtitle> <link rel="stylesheet" type="text/css" href="./css/index.css"/> head> <body> <div class="box"> <ul class="minbox"> <li>li> <li>li> <li>li> <li><li> <li>li> ul> <ul class="maxbox"> <li>li> <li>li> <li>li> <li>li> <li>li> <li>li> ul> div> body>html>CSS代码：
*{ margin: 0; /*去掉外边距*/ padding: 0; /*去掉内边距*/}.box{ width: 200px; /*宽度*/ height: 200px; /*高度*/ position: absolute;/*绝对定位*/ top: 30%; /*与顶部的距离*/ left: 40%;/*与左侧的距离*/ transform-style: preserve-3d; /*^_^只有设置了此属性才有z轴*/ transform: rotateX(-90deg);/*绕x轴旋转*/ /*使用动画*/ animation: move 10s 100 linear; /*动画名称 动画执行的时间 次数 匀速*/}ul{ list-style: none; /*去掉点*/}/*定义动画*/@keyframes move{ from{ transform: rotateX(-30deg) rotateY(0deg); } to{transform: rotateX(-30deg) rotateY(360deg);}}/*小盒子*/.minbox{ width: 100px; /*宽度*/ height: 100px;/*高度*/ position: absolute; /*绝对定位*/ left: 50px; top: 50px; transform-style: preserve-3d;/*设置为3d图形*/}.minbox > li{ width: 100px; height: 100px; border: 1px solid black;/*边框宽度 样式 颜色*/ font-size: 50px;/*设置字体大小*/ text-align: center;/*文本水平居中*/ line-height: 100px;/*让行高等于高度,达到垂直居中的效果*/ position: absolute; left: 0; top: 0; background-image: url(../img/111.jpg);//可以换成你喜欢的照片 background-size: 100px 100px;}.minbox > li:nth-child(1){ transform: translateZ(50px);}.minbox > li:nth-child(2){ transform: translateZ(-50px);}.minbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(50px);}.minbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-50px);}.minbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(50px);}.minbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-50px);} /*大盒子*/.maxbox{ width: 200px; /*宽度*/ height: 200px;/*高度*/ position: absolute; /*绝对定位*/ left: ; top: 0; transform-style: preserve-3d;/*设置为3d图形*/}.maxbox > li{ width: 200px; height: 200px; border: 1px solid black;/*边框宽度 样式 颜色*/ font-size: 50px;/*设置字体大小*/ text-align: center;/*文本水平居中*/ line-height: 200px;/*让行高等于高度,达到垂直居中的效果*/ position: absolute; left: 0; top: 0; background-image: url(../img/222.jpg);//可以换成你喜欢的照片 background-size: 200px 200px; opacity: 0.8;}.maxbox > li:nth-child(1){ transform: translateZ(100px);}.maxbox > li:nth-child(2){ transform: translateZ(-100px);}.maxbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(100px);}.maxbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-100px);}.maxbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(100px);}.maxbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-100px);}.box:hover ul.maxbox > li{ width: 400px; height: 400px; background-size: 400px 400px ; top: -100px; left: -100px;}.box:hover ul.maxbox > li:nth-child(1){ transform: translateZ(300px);}.box:hover ul.maxbox > li:nth-child(2){ transform: translateZ(-300px);}.box:hover ul.maxbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(300px);}.box:hover ul.maxbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-300px);}.box:hover ul.maxbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(300px);}.box:hover ul.maxbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-300px);}
2632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
