html 3d 图片轮播,长方体3D轮播图（CSS3实现）

效果图：

1.png

2.png

注意点：

为了保证各个界面的字都是正立的，应先旋转再平移。

如果不使用背景色，使用图片时一定要设置图片的宽高，否则图片间有间隙。

近大远小的效果是在旋转的元素的父元素加 perspective: 500px;

展示3D效果是在旋转元素的css中加transform-style: preserve-3d;

可以如该种方法先画出正方体，再拉伸为长方体；也可以设置宽高时直接设为长方形。

代码如下：

Title

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 200px;

margin: 150px auto;

perspective: 500px;

}

ul{

width: 200px;

height: 200px;

box-sizing: border-box;

position: relative;

transform-style: preserve-3d;

animation:move 4s linear 0s infinite normal;

}

@keyframes move {

from{

transform: rotateX(0deg);

}

to{

transform: rotateX(360deg);

}

ul li{

width: 200px;

height: 200px;

line-height: 200px;

text-align: center;

font-size: 28px;

list-style: none;

position: absolute;

top: 0;

left: 0;

}

ul li:nth-child(1){

background: red;

transform:rotateX(90deg) translateZ(100px) scale(2,1);

}

ul li:nth-child(2){

background: green;

transform: rotateX(180deg) translateZ(100px) scale(2,1);

}

ul li:nth-child(3){

background: blue;

transform: rotateX(270deg) translateZ(100px) scale(2,1);

}

ul li:nth-child(4){

background: yellow;

transform: rotateX(360deg) translateZ(100px) scale(2,1);

}

html 3d 图片轮播,长方体3D轮播图（CSS3实现）相关推荐

实现3d图片移动_「3D建模」什么是动画和角色设计的3D索具？
3D建模设计软件 maya.zbrush.3Dmax 索具如何工作? 索具是较大动画过程的一部分. 创建3D模型后,将构建代表骨骼结构的一系列骨骼.例如,在一个角色中,可能有一组背部骨骼,脊柱和头部骨 ...
html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
Zepto.js 3D图片轮播旋转插件
下载地址 Zepto.js 3D图片轮播旋转插件,基于jquery的旋转木马图片切换插件. dd:
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
要实现的效果如下图,3d 地图高亮自动轮播,展示白云区各个镇街的人口数局. 原由为什么想到这个方案,是因为我在用 echarts-gl 实现 3d 地图效果的过程中,我发现通过 dispatchA ...
分享个轮播的3D饼图，分别用Echarts和HighCharts实现
轮播的3D饼图,效果如下 Echarts效果图有这方面需求的朋友肯定有在Echarts社区上找过相关3D饼图的方案. 大同小异,所有3D饼图的实现方式,基本上使用了surface曲面的原理,我也是在 ...
QML 实现图片帧渐隐渐显轮播
前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方 ...
js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
Js实现图片点击切换与轮播
Js实现图片点击切换与轮播图片点击切换 <!DOCTYPE html> <html><head> <meta charset="UTF-8&quo ...
13种酷炫的html5 3D图片切换代码
jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 ...

html 3d 图片轮播,长方体3D轮播图（CSS3实现）

html 3d 图片轮播,长方体3D轮播图（CSS3实现）相关推荐

最新文章

热门文章