HTML之3D旋转图片

鼠标悬停在外面那张图片上时，会放大，你可以放入你喜欢的图片!

效果图：

运用图片：111.jpg，222.jpg

HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>3Dbox</title><link rel="stylesheet" type="text/css"href="./css/index.css"/></head><body><!-- div.box按下tab --><div class="box"><!-- ul.minbox>li*6 按下tab --><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);
}

HTML之3D旋转图片相关推荐

HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
JS实现3D旋转图片
想将图片3D旋转展示出来,如下图所示要想3D展示,需要在样式中设置 transform-style属性为preserve-3d,根据图片的数量计算旋转度数,给每一张图片设置上旋转角度,使图片展开围成 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
css 3d旋转图片（css旋转木马）（详细教程）
成品展示接下来开始制作旋转老婆图片一.准备html骨架和基本的css 先准备好html骨架(后面为了挨个测试可以先把后面5个div注释掉) <div class="bigbox&q ...

HTML之3D旋转图片

鼠标悬停在外面那张图片上时，会放大，你可以放入你喜欢的图片!

HTML代码

CSS代码

HTML之3D旋转图片相关推荐

最新文章

热门文章