css-图片旋转木马3D效果

参考博客：张鑫旭

我们先来看一下效果：

还不错咯，这个主要是利用了css3里面的transform属性。

简单介绍一下。

总共分成3层，外层div是舞台设置perspective属性，里层div是容器开启transform-style:preserve-3d;

我们给里层div里面放入6张图片，然后设置position:absolute,定位到底部。

6张图片围成一圈（360度），那么每张图片沿Y方向旋转60*k度

几张图片都挤在一起了。

这是我们看不出任何3D效果，这是我们需要利用translateZ属性了。

我们假设这些图片是围绕一个球心的，那么我们要看出效果我们必须设置这些图片里球心的距离，不然就是0，那很显然就是缩在一起了。

图片的距离是 = （图片width/2)*根号3 （px:因为圆心角是60嘛 )+ 20px(空隙）

图片

张鑫旭是9张所以为360/9=40.道理一样。

自己写的代码，不能和大神比的（可怕）

html:

<body > <div class='wrap'><div class='inner' style="transform:rotateY(0deg)"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class='picture' style="transform:rotateY(0deg) translateZ(123.923px)" ><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class='picture' style="transform:rotateY(60deg)  translateZ(123.923px)" ><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class='picture' style="transform:rotateY(120deg)  translateZ(123.923px)"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class='picture' style="transform:rotateY(180deg) translateZ(123.923px)"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class='picture' style="transform:rotateY(240deg)  translateZ(123.923px)" ><img src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class='picture' style="transform:rotateY(300deg)  translateZ(123.923px)"></div></div><script tyle='text/javascript'>var inner=document.getElementsByClassName('inner')[0];inner.οnclick=function(e) {//this.style.rotateY=parseInt(this.style.rotateY)+60+'deg';var reg=/\d{1,}/;var num=this.style.transform.toString().match(reg)[0];console.log(num);num=parseInt(num)+60;this.style.transform='rotateY('+num+'deg)';}</script>
</body>

js部分就是绑定了一个事件，点击图片然后让容器旋转60，那么就相当于换一张图片了。

css:

 *{padding:0px;border:0px;}.wrap {height:100px;width:900px;padding:100px 50px;perspective:800px;background:rgb(203, 207, 203);}.inner{display:flex;position:absolute;left:40%;width:120px;height:100px;transform-style:preserve-3d;}.picture {width:120px;position:absolute;bottom:0;
}

css-图片旋转木马3D效果相关推荐

css3图片倾斜3D效果
css3图片倾斜3D效果这是一款非常炫酷图片3D倾斜动画,响应式的图片列表布局,鼠标悬停图片3D倾斜遮罩显示标题图标效果. 演示地址下载地址
js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
Unity 2D图片的3D效果（1）——阴影
项目为方便编辑地图,使用的是Unity自带的Tilemap功能.因为使用的是俯视视角,拼好第一个地图后发现2D图片展现的效果太平了,地面和障碍物很难分辨.所以才有了"把2d图片展现出3d效果 ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
纯css实现照片墙3D效果
每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...
拜托，使用 Three.js 让二维图片具有 3D 效果超酷的
前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景逛 sk ...
【CSON原创】纯CSS图片放大浏览效果
效果预览: 前些天无意中看到的一条阿里巴巴前端面试题,该题目如下: 当鼠标略过某个区块的时候,该区块会放大25%,并且其他的区块仍然固定不动. 发现这种效果还是挺常用的,所以用纯css做了个类似的效果 ...
html css图片炫酷效果,5种CSS3 Transitions炫酷图片标题特效
这是一款效果非常酷的CSS3 Transitions图片标题特效.这组图片标题特效共5种不同的效果,都是使用CSS3 Transitions过渡动画来制作,分别是移动动画,翻转动画,缩放动画,旋转动画 ...
使用Three.js让二维图片呈现3D效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 场景编辑器(NSDT) 背景逛 sketchfab 网站的时候我看到有很多二维 ...
css图片渐变透明效果
其实不是透明而是图片渐渐向背景色靠齐这里我们以白色为例话不多说我们直接上代码 <!DOCTYPE html> <html><head><title&g ...

css-图片旋转木马3D效果

css-图片旋转木马3D效果相关推荐

最新文章

热门文章