-
鼠标悬停，图片360度旋转
效果：代码：
知识点：CSS3 的transform 属性可以向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置为rotateZ(angle) 实现DOM元素沿着 Z 轴的 3D 旋转，相关的设置还有rotate、rotate3d、rotateX、rotateY。立即学习“前端免费学习笔记（深入）”；
-
图片悬停放大
效果：
代码：CSS3：
HTML：
@@##@@
知识点： 同样用到CSS3的transform属性，设置scale(x,y)，实现DOM元素的2D缩放转换，相关的还有scale3d、scaleX、scaleY、scaleZ
仿虎嗅网在线视频教育门户源码2.0下载仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。
-
实现3D图片旋转相册
效果:
代码:CSS:
HTML:
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@
知识点: 还是凭借CSS3的transform属性以及animation属性，使用rotateY定义元素沿着 Y 轴的进行 3D 旋转，使用translateZ定义元素沿着Z轴进行 3D 转换；
同时设置元素的animation属性实现动画效果，本文中定义如下：animation: rotation 20s infinite linear;
animation-name（需要绑定到选择器的 keyframe 名称）：rotation的动画
animation-duration（完成动画所花费的时间）：20s
animation-iteration-count（动画应该播放的次数）：infinite（无限次）
animation-timing-function(动画的速度曲线)：linear（动画从头到尾的速度是相同的）
更多纯Css3手工打造网页图片效果 相关文章请关注PHP中文网！
