html中img显示旋转,css如何实现图片的旋转展示效果(代码示例)
本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示,制作一个手动操作的“无限”照片轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
下面我们就开始介绍如何实现效果。
1、构建图像轮播框架
首先是HTML。它有点难以阅读,因为我们删除了元素之间的任何空格或回车。这样我们就可以使用JavaScript更轻松地引用不同的图像 - 空格或行在某些浏览器中创建新节点。
正如你所看到的,那里没有太多需要解释的地方。画廊包含在DIV中,包括列出的照片/链接,然后是一些带有onclick事件的导航链接。
2、在3D空间中布置照片
造型更加复杂。我们在这里做的是将前五张照片塑造成凹形并隐藏任何额外的照片(暂时)。外部照片旋转60度,相邻照片旋转30度。中央照片被抬离页面。#stage {
margin: 1em auto;
height: 120px;
}
#rotator {
position: absolute;
white-space: nowrap;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
}
#rotator a img {
position: relative;
padding: 10px;
border: 1px solid #ccc;
vertical-align: middle;
}
#rotator a:nth-child(1) img {
-webkit-transform-origin: 100% 50% 0;
-webkit-transform: rotateY(-60deg);
-moz-transform-origin: 100% 50% 0;
-moz-transform: rotateY(-60deg);
}
#rotator a:nth-child(2) img {
-webkit-transform-origin: 0 50% 0;
-webkit-transform: rotateY(-30deg);
-moz-transform-origin: 0 50% 0;
-moz-transform: rotateY(-30deg);
}
#rotator a:nth-child(3) img {
-webkit-transform: translateZ(220px);
-moz-transform: translateZ(220px);
}
#rotator a:nth-child(4) img {
-webkit-transform-origin: 100% 50% 0;
-webkit-transform: rotateY(30deg);
-moz-transform-origin: 100% 50% 0;
-moz-transform: rotateY(30deg);
}
#rotator a:nth-child(5) img {
-webkit-transform-origin: 0 50% 0;
-webkit-transform: rotateY(60deg);
-moz-transform-origin: 0 50% 0;
-moz-transform: rotateY(60deg);
}
#rotator a:nth-child(n+6) {
display: none;
}
为了引用单个照片/链接,我们使用了nth-child伪类(如果不清楚,在之前的文章【css伪类之nth-child()示例详解】里有介绍)。在这种情况下,链接(A)是父DIV的子代。如果没有链接,则孩子们将成为IMG元素。
3、旋转照片
您之前看到的一点JavaScript(onclick)调用以下函数。他们所做的就是从DOM中的照片数组的一端获取一个元素并将其移动到另一端:
html中img显示旋转,css如何实现图片的旋转展示效果(代码示例)相关推荐
- 关于手机设置中,显示和字体大小的变更对视图展示效果的影响
在手机中的设置功能中,一般会有显示和字体大小调节的选项: 其中字体大小调节的是文字的大小,比如说控件TextView中的文字大小,一般我们在设置textview文字大小的时候,单位一般会使用sp(跟密 ...
- css实现的图片悬停旋转弹出文本框html页面前端源码
大家好,今天给大家介绍一款,css实现的图片悬停旋转弹出文本框html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 当鼠标经过图片的时候,就会激活旋转和文本弹出事件,非常适合用在图片展 ...
- CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜 ...
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
- html svg波浪,CSS实现svg图片水纹波浪流动效果
CSS实现svg图片水纹波浪流动效果 里面的其他颜色是自己加的,把下面代码自己改改就可以html> 标题 body { margin:0; background:red; } h1 { fo ...
- HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
- html生成无序列表,CSS无序列表创建的标准菜单效果代码
本文实例讲述了CSS无序列表创建的标准菜单效果代码.分享给大家供大家参考.具体如下: 这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS制作教程,这里重新整理了一下,去除了广告代码, ...
- html 设置图片显示比例,css怎么实现图片在页面上以相同等比例显示缩放?(示例)...
在我们浏览页面时或者实际工作中,偶尔会遇到图片缩放的问题.那么本篇文章就给大家介绍关于css 图片等比例缩放即css图片等比例显示的问题.希望对有需要的朋友有所帮助. css图片等比例显示具体代码示例 ...
最新文章
- Spring Boot不允许加载iframe问题解决
- android x86怎么引导,Android、Ubuntu、win三系统引导求教
- VMware Tools按钮变灰色,无法安装的解决方法
- Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
- 使用ST03N查看指定user的transaction 性能数据
- Guava RateLimiter限流原理解析
- 朋友圈、浏览器分享实现
- git merge分支不合并_合并分支使用Merge还是Rebase?
- 可以飞的电动汽车,波音与保时捷要合作开发了
- java 我爱你_Java初级教程-课程笔记
- LeetCode 368. 最大整除子集(动态规划)
- 【ZOJ 4070】Function and Function
- python 基于模板生成ppt_【Python3】通过模板实现PPT的自动生成
- ascii码所有字符对照表(包含汉字和外国文字)
- 学习笔记 Tianmao 篇 recyclerView 辅助的RecycleAdapterImpl类(适配自定义home三型)
- python判断手机号运营商_python手机号码运营商归属测试
- 带你了解一下什么是SaaS平台
- Linux查看文件指令cat、more、less、head、tail用法
- Windows下访问Ubuntu虚拟机中的Samba服务器遇到“\\192.168.71.128无法访问,您可能没有权限访问网络资源。请与这台服务器的管理员联系以查明您是否有访问权”的问题
- EA周报 | Libra将与支付宝微信展开竞争;Google终止中国版搜索引擎;滴滴柳青:顺风车目前不能上线是因为害怕...
热门文章
- 【mysql】mysql常用语句
- C++ Member Functions的各种调用方式
- java 中文字符串 排序_Java实现对中文字符串的排序功能实例代码
- python语言数字类型字节_Python中 各种数字类型的判别(numerica, digital, decimal)
- 拓端tecdat|R语言用RNN循环神经网络 、LSTM长短期记忆网络实现时间序列长期利率预测
- 【数据分享】工人收入工资及其社会经济影响因素数据
- 拓端tecdat|R语言使用马尔可夫链Markov Chain, MC来模拟抵押违约
- L1-8 估值一亿的AI核心代码 (20 分)
- hibernate教程笔记4
- 【leetcode】链表题(python)