html立体旋转照片墙,js实现旋转的照片墙

最新推荐文章于 2024-05-15 12:09:52 发布
最新推荐文章于 2024-05-15 12:09:52 发布
阅读量2.1k 收藏 2
点赞数
文章标签： html立体旋转照片墙
本文通过实例展示如何利用CSS3和Webkit动画技术，创建一个动态旋转的3D效果，模仿篮球明星韦德的告别表演。通过一系列div元素的变换和动画，呈现视觉上的一系列动作，深入探讨了CSS3的`transform`和`keyframes`属性的应用。
摘要由CSDN通过智能技术生成

【实例简介】

【实例截图】

26ef0a3ca5480808d8e0b3413b11a8ae.png

【核心代码】

韦德最后一舞

.out{ width:0px; height:350px;background: gray; margin:300px auto; -webkit-transform-style:preserve-3d; -webkit-perspective:1000px;-webkit-perspective-origin: center center;}

.con{width:105px; height:1000px; -webkit-transform-style:preserve-3d; position: relative; -webkit-transform: rotateY(20deg) rotateX(20deg);}

.con div{width:105px; height:200px; background: red; position: absolute; left: 20px; top:0px;}

.con div:nth-child(1){background:#324212;-webkit-transform: translateZ(300px);}

.con div:nth-child(2){background:#537212;-webkit-transform:rotateY(22.5deg) translateZ(300px);}

.con div:nth-child(3){background:#865332;-webkit-transform: rotateY(45deg) translateZ(300px);}

.con div:nth-child(4){background:#325612;-webkit-transform: rotateY(67.5deg) translateZ(300px);}

.con div:nth-child(5){background:#374712;-webkit-transform: rotateY(90deg) translateZ(300px);}

.con div:nth-child(6){background:#329612;-webkit-transform: rotateY(112.5deg) translateZ(300px);}

.con div:nth-child(7){background:#322612;-webkit-transform: rotateY(135deg) translateZ(300px);}

.con div:nth-child(8){background:#621612;-webkit-transform: rotateY(157.5deg) translateZ(300px);}

.con div:nth-child(9){background:#324256;-webkit-transform: rotateY(180deg) translateZ(300px);}

.con div:nth-child(10){background:#335712;-webkit-transform: rotateY(202.5deg) translateZ(300px);}

.con div:nth-child(11){background:#51212;-webkit-transform: rotateY(225deg) translateZ(300px);}

.con div:nth-child(12){background:#553212;-webkit-transform: rotateY(247.5deg) translateZ(300px);}

.con div:nth-child(13){background:#124212;-webkit-transform: rotateY(270deg) translateZ(300px);}

.con div:nth-child(14){background:#346212;-webkit-transform: rotateY(292.5deg) translateZ(300px);}

.con div:nth-child(15){background:#273212;-webkit-transform: rotateY(315deg) translateZ(300px);}

.con div:nth-child(16){background:#921212;-webkit-transform: rotateY(337.5deg) translateZ(300px);}

@-webkit-keyframes 'run'{

0%{-webkit-transform:rotateX(-20deg) rotateY(0deg);}

100%{-webkit-transform:rotateX(-20deg) rotateY(180deg);}

}

.con2{-webkit-animation:run 20s linear infinite 1s;}

#content1 img {

width: 105px;

height:180px;

}

#content2 img {

width: 105px;

height:180px;

}

#content3 img {

width: 105px;

height:180px;

}#content4 img {

width: 105px;

height:180px;

}

#content5 img {

width: 105px;

height:180px;

}#content6 img {

width: 105px;

height:180px;

}#content7 img {

width: 105px;

height:180px;

}

#content8 img {

width: 105px;

height:180px;

}

#content9 img {

width: 105px;

height:180px;

}

#content10 img {

width: 105px;

height:180px;

}

#content11 img {

width: 105px;

height:180px;

}

#content12 img {

width: 105px;

height:180px;

}

#content13 img {

width: 105px;

height:180px;

}

#content14 img {

width: 105px;

height:180px;

}

#content15 img {

width: 105px;

height:180px;

}

#content16 img {

width: 105px;

height:180px;

2003-20041.png

2018-201916.png

2017-201815.png

2016-201714.png

2015-201613.png

2014-201512.png

2013-201411.png

2012-201310.png

2011-20129.png

2010-20118.png

2009-20107.png

2008-20096.png

2007-20085.png

2006-20074.png

2005-20063.png

2004-20052.png

Suyi控
关注
html+照片墙
04-25
通过HTML5+CSS3所设计的照片墙。。。有需要的请取。。
HTML照片墙
qq_47044642的博客
01-12 866
照片墙主要代码 <style type="text/css"> body{ background: url(image/bg.jpg); } #gallery{ margin: 100px auto; padding: 40px; list-style: none; width: 1000px; } #gallery li{ float: left; width: 300px; overflo
html 照片墙
热门推荐
杨杨杨~~的博客
11-20 2万+
html 照片墙 代码很简单，首先准备一些照片放入一个文件夹。 之后上代码，难度不大，可以直接复制粘贴使用: html文件: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &l...
HTML5照片墙
03-18
HTML5 照片墙 代码 一看就会 需要的可以下载
照片墙 Html
weixin_37619833的博客
01-31 1881
Css 层叠样式 { margin: 0; padding: 0; } #main { position: relative; width: 100%; } .box { padding: 15px 0 0 15px; float: left; } .pic { padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shad...
3D旋转照片墙html
12-26
【3D照片墙html】是一种利用HTML5、CSS3以及可能的JavaScript技术实现的交互式网页设计。这种设计能够创建一个立体的、可旋转的照片展示墙，用户可以通过鼠标操作从不同角度浏览照片，增强了用户体验和视觉效果。 ...
html5立体照片墙效果,js实现3D照片墙效果
weixin_30091863的博客
06-03 2798
聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示...
html和js相册（3D立体相册+16宫格相册+照片墙+自动播放相册）
07-22
在这个项目中，我们探讨了如何利用这两种技术实现多种类型的相册展示：3D立体相册、16宫格相册、照片墙以及自动播放相册。 1. **3D立体相册**： 3D立体相册是一种创新的展示方式，它通过CSS3的3D变换和JavaScript...
JS实现的非常漂亮的3D立体照片墙显示效果代码.zip
05-01
这个"JS实现的非常漂亮的3D立体照片墙显示效果代码.zip"文件提供了一个利用这三门技术创建的3D立体照片墙的示例。下面将详细介绍这个项目中的关键知识点。 1. **JavaScript基础**： - **DOM操作**：JavaScript用于...
js实现3D照片墙效果
10-16
本文主要讲解如何使用JavaScript实现一个3D照片墙的效果。这个效果涉及到前端开发中的CSS3和JavaScript技术，具体包括以下知识点： 1. **CSS3 3D变换**： - `transform`属性用于改变元素的位置、大小或形状。在3D...
html实现照片墙 html实现照片墙
02-22
html实现照片墙
照片墙_HTML5制作照片墙_
09-29
这是一个利用HTML5制作的照片墙，用于参考吗，希望对大家有用
一个效果很好看的照片墙.html
06-11
一个效果很好看的照片墙，使用jquery完成。其中添加了详细的注释，注意要引入jquery文件和图片的路径问题。
二维旋转照片墙的html
09-24
网页制作中二维旋转照片墙，搭配同名的CSS,呈现出来的效果是：可以旋转不容角度的多张照片，照片自己放进去，有模板
JS实现的非常漂亮的3D立体照片墙显示效果
07-23
JS实现的非常漂亮的3D立体照片墙显示效果
html实现照片墙
weixin_57223652的博客
04-13 517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习&
html实现好看的照片墙
nihaio25的博客
09-24 6921
照片可缩放可移动 效果：鼠标没进入之前的效果 鼠标悬浮在某一张图片之上 当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把js代码去掉就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
【HTML 实现 —— 爱心照片墙】
2401_84097678的博客
05-15 475
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html旋转3D照片墙代码
最新发布
05-26
HTML 旋转 3D 照片墙可以通过 CSS3 的 transform 和 transition 属性实现。下面是一个简单的示例代码： ```html <div class="photo-wall"> <div class="photo-item"> <img src="photo1.jpg" alt="photo1"> </div> <div class="photo-item"> <img src="photo2.jpg" alt="photo2"> </div> <div class="photo-item"> <img src="photo3.jpg" alt="photo3"> </div> <!-- 其他照片项 --> </div> ``` ```css .photo-wall { position: relative; width: 400px; height: 300px; margin: 0 auto; perspective: 1000px; } .photo-item { position: absolute; width: 200px; height: 150px; top: 75px; left: 100px; transition: transform .5s ease-out; } .photo-item:hover { transform: rotateY(180deg); } .photo-item img { width: 100%; height: 100%; } ``` 上面的代码中，`.photo-wall` 是照片墙容器，设置了透视距离。`.photo-item` 是每张照片的容器，设置了宽、高和初始位置，并设置了鼠标悬停时的旋转效果。`.photo-item img` 是照片的图片，设置了宽、高等样式。 相关问题： 1. 如何在 HTML 中插入图片？ 2. CSS3 的 transform 和 transition 属性如何使用？ 3. 什么是透视距离？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值