3D动画展示--3D图片旋转展示

3D图片旋转展示

下面是6个div放置6张周围旋转的图,html如下

<section><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

下面是css样式,body样式为 perspective: 1000px;添加透视效果

body {perspective: 1000px;
}

section里面放置里面的一张图和设置3d透视

section {margin: 100px auto;width: 450px;height: 300px;background: url(untitled/2.jpg) no-repeat;transform-style: preserve-3d;/*设置3d透视*/position: relative;transition: 5s linear;/*过渡效果*/
}

设置div样式,脱离文档流

section div {width: 450px;height: 300px;background: url(untitled/7.jpg) no-repeat;background-size: cover;position: absolute;top: 0;left: 0;
}

section添加伪类:hover,鼠标进入盒子旋转

section:hover {transform: rotateY(360deg);
}

下面为周边旋转的6张图片的位置

section div:nth-child(1) {transform: rotateY(0deg) translateZ(500px);
}
section div:nth-child(2) {transform: rotateY(60deg) translateZ(500px);
}
section div:nth-child(3) {transform: rotateY(120deg) translateZ(500px);
}
section div:nth-child(4) {transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(5) {transform: rotateY(240deg) translateZ(500px);
}
section div:nth-child(6) {transform: rotateY(300deg) translateZ(500px);
}

完成!

3D动画展示--3D图片旋转展示相关推荐

HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
【动画】背景图片旋转（内容不旋转）
需求图片旋转,内容不旋转效果 .card{content: "";width: 200px;height: 200px;position: fixed;border-radiu ...
微课设计与开发——利用adobe软件制作的动画（以图片形式展示）
1.公交车动画 2. 各类转场特效动画 3.建桥动画 4.PPT设计与制作 5.目标靶动画 6.摄像机动画 7.时钟动画
android 实现3d动画,安卓3d动画的简单实现1
Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现.这里我列举一个最简单翻转动画的例子. 创建一个activity,布局就用最简单的,里面放一个textView ...
视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
只要做出角色3D模型，AI就能让它动起来！再也不怕3D动画拖更了丨SIGGRAPH 2020
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达郭一璞发自云凹非寺量子位报道 | 公众号 QbitAI 一只3D的狗头卡通角色 ...
居然可以用jQuery实现360度汽车产品3D旋转展示酷炫特效使用你的小鼠标来试试吧
作者:极客小俊公众号:同名今天我们来看一个用jquery实现360度汽车产品3D旋转展示的效果,其实逻辑很简单, 就是让一堆图片转来转去就行了!
超级贵，机器人的核心部件，3D动画展示谐波减速器工作原理
昨天咱们分享了RV减速器的工作原理,有读者提出来让分享一下谐波减速器,今天咱们就分享一点关于谐波减速器的资料,希望对大家有帮助. 谐波减速器内部结构谐波减速器的制造技术基础是谐波传动,谐波传动是由波 ...
html5 3d室内房间布局图片展示js特效
下载地址 html5 3d室内房间布局图片展示特效 dd:

3D动画展示--3D图片旋转展示

3D图片旋转展示

3D动画展示--3D图片旋转展示相关推荐

最新文章

热门文章