php 图片 3d旋转图片,html5实现图片的3D旋转效果

49bc0f8e0edf8bfc67ea6ee486e189e3.png

我们先来看一下实现效果:

06159c1c1bb1da4084eafe250acb6932.png

(学习视频分享:html视频教程)

H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果。

该实例运用H5和CSS3动画效果,未用javascript。提高了本人对CSS3 新属性的了解及掌握。

完整代码如下所示:

HTML5 3D旋转图片相册 可鼠标悬停

*{

padding: 0;

margin: 0;

border: none;

outline: none;

box-sizing: border-box;

}

*:before,*:after{

box-sizing: border-box;

}

html,body{

min-height: 100%;

}

body{

background-image: radial-gradient(mintcream 0%, lightgray 100%);;

}

.Container{

margin: 4% auto;

width: 210px;

height: 140px;

position: relative;

perspective: 1000px;

}

#carousel{

width: 100%;

height: 100%;

position: absolute;

transform-style:preserve-3d;

animation: rotation 20s infinite linear;

}

#carousel:hover{

animation-play-state: paused;

}

#carousel figure{

display: block;

position: absolute;

width: 220px;

height: 120px;

left: 10px;

top: 10px;

background: black;

overflow: hidden;

border: solid 5px black;

}

img{

filter: grayscale(1);

cursor: pointer;

transition:all 0.3s ease 0s;

width: 100%;

height: 100%;

}

img:hover{

filter: grayscale(0);

transform: scale(1.2,1.2);

}

#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}

#carousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(288px);}

#carousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(288px);}

#carousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(288px);}

#carousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(288px);}

#carousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(288px);}

@keyframes rotation{

from{

transform: rotateY(0deg);

}

to{

transform: rotateY(360deg);

}

}

相关推荐:h5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据这么多,且看R语言怎么处理!

随着科技的不断进步,数据处理量的不断增大,对数据进行处理、分析、统计建模、数据挖掘以及可视化的重要性日渐突出。如果说有一门简单易学、通俗易懂并且集上述功能为一体的编程语言让科研人员从中解脱出来,R语言当仁不让。作为一种统计分析软…

乘风破浪,.Net Core遇见Dapr,为云原生而生的分布式应用运行时

Dapr是一个由微软主导的云原生开源项目,国内云计算巨头阿里云也积极参与其中,2019年10月首次发布,到今年2月正式发布V1.0版本。在不到一年半的时间内,github star数达到了1.2万,超过同期的kubernetes、istio、knative等…

催人泪下!一个程序员的悲惨故事

全世界有3.14 % 的人已经关注了数据与算法之美编辑:大数据二狗如果你喜欢这篇文章,就把它发给朋友看吧~精品课程推荐:选购数学科普正版读物严选“数学思维好物”送给孩子的益智礼物 | 办公室神器算法工程师成长阅读 | 居家高科技理工…

双十一,单身狗除了买买买,还能做什么?

躲得过618,躲得过1024终究躲不过双十一小天相信,肯定有很多的小伙伴正磨刀霍霍对准自己的手这个节日小天陪你们买买买!11月6~13日超级数学建模携手网易云课堂“超级充电节”为大家带来多重惊喜,福利享不停!趁此机会赶紧…

将 SharePoint 开发与其他形式的开发进行比较

从三个视点检查 SharePoint 开发很有用: 为 .NET Framework 构建可扩展的应用程序 构建数据库应用程序 构建传统的富客户端应用程序将 SharePoint 应用程序与可扩展的 .NET Web 应用程序进行比较 您可以从开发人员的角度检查 SharePoint 开发,该开发人员…

Visual Studio 2022这些重大更新,影响每一位.NET开发者!

难得五一长假,蹲家里盘点了一下这2年.NET的发展,可谓日新月异,重现辉煌,各种重磅更新接踵而至:1 .NET Core3.1各种最受欢迎、性能排行等榜单霸榜,3个月增加100w的关注者;2 .NET5让.NET Framewor…

影响计算机算法世界的十位大师

全世界有3.14 % 的人已经关注了数据与算法之美1、伟大的智者——Don E.Knuth,中文名:高德纳(1938-)算法和程序设计技术的先驱者。Oh,God!一些国外网站这样评价他。一般说来,不知道此人的程序员是不可原谅的。其经典著作《计算机程序设计艺术》…

【翻译】WPF中的数据绑定表达式

有很多文章讨论绑定的概念,并讲解如何使用StaticResources和DynamicResources绑定属性。这些概念使用WPF提供的数据绑定表达式。在本文中,让我们研究WPF提供的不同类型的数据绑定表达式。介绍数据绑定是一种强大的技术,它允许数据在UI元素和业…

12个关键词,告诉你到底什么是机器学习

全世界只有3.14 % 的人关注了数据与算法之美编者按:随着人工智能(AI)技术对各行各业有越来越深入的影响,我们也更多地在新闻或报告中听到“机器学习”、“深度学习”、“增强学习”、“神经网络”等词汇,对于非专业人士来说略为玄幻。这篇文章…

MFC多语言实现方法

2019独角兽企业重金招聘Python工程师标准>>> 一、字符放在DLL资源文件中,切换资源模块(程序默认使用exe模块资源)。 实现要点: 新建一个只包含资源的DLL。通过函数AfxSetResourceHandle设置资源模块。 示意代码为: AfxSetResource…

oracle dbfile数,通过案例学调优之--Oracle参数(db_file_multiblock_read_count)

通过案例学调优之--Oracle参数(db_file_multiblock_read_count)应用环境:操作系统: RedHat EL55Oracle: Oracle 10gR2Oracle DB_FILE_MULTIBLOCK_READ_COUNT是Oracle比较重要的一个全局性参数,可以影响系统级别及sessioin级别。…

转行程序员后,我开始后悔没做这件事

全世界有3.14 % 的人已经关注了数据与算法之美程序 数据结构 算法 ——图灵奖得主,计算机科学家N.Wirth(沃斯)作为程序员,我们做机器学习也好,做python开发也好,java开发也好。有一种对所有程序员无一例外的刚需 —— 算法与数据…

工业互联网的两种极端想法和两点反思

目 录1. 概述2. 两种极端想法3. 两点反思1. 概述最近走访了很多企业,涉及到的行业包括:军工、特钢、有色、加工制造(海洋钻井平台)、建材、纺织等,在与不同的行业交流的过程中,我发现…

兵马未至,数据先行,且看如何进行数据挖掘!

从数据中抽取信息从信息中挖掘知识随着大数据时代的到来,数据挖掘的重要性越发显著。可谓是兵马未至,数据先行。所谓数据挖掘,一般是指从大型数据库中将隐藏的预测信息抽取出来的过程,而更为精确的解释就是“从数据中挖掘知识”。…

微软加入字节码联盟,进一步开发支持Blazor 的WebAssembly技术

字节码联盟 (Bytecode Alliance)宣布已正式成为 501(c)(3) 非营利组织,参与组建的企业/组织包括 Fastly、英特尔、Mozilla 和微软,此外还邀请到了 Arm、DFINITY Foundation、Embark Studios、谷歌、Shopify 和加州大学圣地亚哥分校加入并成为正式会员。B…

传说中的贝叶斯统计到底有什么来头?

全世界有3.14 % 的人已经关注了数据与算法之美贝叶斯统计在机器学习中占有一个什么样的地位,它的原理以及实现过程又是如何的?本文对相关概念以及原理进行了介绍。引言:在很多分析学者看来,贝叶斯统计仍然是难以理解的。受机器学习…

更新两个WPF开源项目

前言好久没更新博客了,最近准备重拾博客,将更新恢复起来。开源项目这些年零零散散做了很多项目,准备整理一下,将其开源,现整理了两个项目:绑定引擎(BindingEngine),插件式…

OpenGL ES 3D 粒子系统小结

2019独角兽企业重金招聘Python工程师标准>>> 所谓粒子系统可以想象为一堆粒子由一个点或一个面按照一定的规律进行喷射。 粒子系统大致分为2类:一类为“点喷式”,一类为“面喷式”。可以想象前者由一个点进行喷射,类似于焰火&…

理科生用创意毁灭世界,爆笑!

全世界有3.14 % 的人已经关注了数据与算法之美1、青年问禅师:“大师,我很爱我的女朋友,她也有很多优点,但是总有几个缺点让我非常讨厌,有什么方法能让她改变?”禅师浅笑,答:“方法很…

我的C#/.NET学习诀窍——LINQPad

在我以往的文章中,尤其涉及代码演示的,都使用了同一个工具——LINQPad。但许多客户面对我分享的.linq源文件都迷茫不知所措,因此有必要来聊聊一下这个强大的工具。本文首先将对该工具做个简单的介绍,并且分享一些LINQPad的优点&am…