实现CSS3 3D围绕旋转

本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.0.js" ></script><style>* {margin: 0;padding: 0;}.container {/*指定观察者与平面的距离，使有透视效果*//*若无法正常3d效果，将perspective属性提到更上一个父容器即可(此处已上提，从items-->container)*/perspective: 1000px;}.items {width: 200px;height: 200px;border: 1px solid black;margin: 200px auto;/*指定子元素定位在三维空间内*/transform-style: preserve-3d;/*让所有item的父级元素（即items）旋转，item就是围绕着旋转了*/animation: doMove 5s infinite linear;}.item {width: 200px;height: 200px;background-color: skyblue;opacity: .6;font-size: 200px;line-height: 200px;text-align: center;position: absolute;}.item img{width: 200px;height: 200px;         }/*定义自动旋转的动画*/@keyframes doMove {100%{transform: rotateY(-360deg);  }                    }.items:hover {/*鼠标移入 暂停动画*/animation-play-state: paused;}</style></head><body><div class="container"><div class="items"><!--简便起见，可以用背景色和数字代替图片 此处我用的是图片--><div class="item"><img src="img/1.jpg" /></div><div class="item"><img src="img/2.jpg" /></div><div class="item"><img src="img/3.jpg" /></div><div class="item"><img src="img/4.jpg" /></div><div class="item"><img src="img/5.jpg" /></div><div class="item"><img src="img/1.jpg" /></div></div></div><script>$(function () {var itemNum = $(".container .items .item").length;//要旋转的div的数量var itemDeg = 360 / itemNum; ///计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度$(".items>.item").each(function (index, element) {$(element).css({//给每一个item设置好位置//rotateY让每一个item绕着Y轴偏移，itemDeg*index是不同索引div的偏移角度//translateZ是控制item在角度偏移后，往他们的正上方移动的距离，数值越大旋转的范围越大transform: "rotateY(" + itemDeg * index + "deg) translateZ(280px)"});});});</script></body>
</html>

实现CSS3 3D围绕旋转相关推荐

CSS3 3D立体旋转
用到的知识点最重要的一个属性 transform-style:flat|preserve-3d;该属性默认值为 flat. 当我们指定一个容器的 transform-style 的属性值为 pres ...
css3加js 3d旋转动画围绕旋转根据请求后台的数据动态渲染
3d 围绕旋转 <style>body {height: auto !important;background-color: #020432;}html{height: auto !imp ...
html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
旋转立体相册制作html,用CSS3制作3D动态旋转相册
最近做一个网站,想弄一个炫酷的效果,所以想到了用CSS3做一个图片3D旋转的效果.[实际就是做一个3D动态旋转相册,自己发挥哦] 下面直接上代码了. -------------------start- ...
html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网
前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转. 今天我们继续用另外一种方式实现. 我们先来看代码 HTML ☺ CSS.smile { margin: ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
本文通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴 ...

实现CSS3 3D围绕旋转

本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。

实现CSS3 3D围绕旋转相关推荐

最新文章

热门文章