如何使用纯CSS实现一个旋转魔方轮播效果

这篇文章给大家分享的是有关如何使用纯CSS实现一个旋转魔方轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司成立十多年来，这条路我们正越走越好，积累了技术与客户资源，形成了良好的口碑。为客户提供网站设计制作、网站设计、网站策划、网页设计、域名注册、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等，这些对于网站建设都非常重要，成都创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案，携手广大客户，共同发展进步。

总的来说我们需要实现以下两个主要功能：

构建一个能够旋转的立方体
让立方体拥有基本轮播所具有的特性

但在完成以上两点之前我们需要再次了解或熟悉一下实现其功能的CSS3基础知识点：

transition
transform
perspective
preserve-3d
animation

transition属性 --- 过渡效果

transition: property duration timing-fucntion delay;

这个属性应该都很熟悉, 也不过多讲, 只是列出其所具有的所有子属性。

过渡属性 --- 过渡持续时间 --- 过渡函数(曲线) --- 过渡延迟

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out; 原生具有的基本过渡函数

transform属性 --- 对元素进行2D或3D转换

它有几个常用的变换方法：scale scale3d translate translate3d rotate rotate3d 等。

transform-origin: x-axis y-axis z-axis;  设置旋转元素的基点位置
transform-style: preserve-3d; 让转换的子元素保留3D转换(与perspective搭配使用)

perspective属性 --- 让元素实现3D透=视效果

perspective: 1000px;
    它有两种写法    
transform: perspective(1000px);

这个属性让物体具有立体的3D透=视效果, 值越大物体离此时我们的眼睛看到屏幕里物体的距离就越远, 相反若它的值越小, 离我们的视角就越近, 即在屏幕中显示的大小就越大。它和preserve-3d共同使用在需要实现3D效果的父元素上搭建舞台视角, 让其子元素能够实现真正的3D转换。

一个基本的立方体就需要结合以上三点属性来实现。

Cube

.cube-wrap{ width: 300px; height: 300px; perspective: 1000px; position: relative; } .cube-wrap .cube{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: all .5s ease; } .cube-wrap .cube .cube-face{ width: 100%; height: 100%; position: absolute; overflow: hidden; opacity: 0.9; border: 1px solid #ccc; } .cube-wrap .cube .cube-face img{ width: 100%; height: 100%; } .cube-face.front{ transform: translateZ(150px); } .cube-face.back{ transform: rotateX(180deg) translateZ(150px); } .cube-face.left{ transform: rotateY(-90deg) translateZ(150px); } .cube-face.right{ transform: rotateY(90deg) translateZ(150px); } .cube-face.top{ transform: rotateX(90deg) translateZ(150px); } .cube-face.bottom{ transform: rotateX(-90deg) translateZ(150px); }

animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation-delay: 1s; 设置为负值时让动画马上开始, 并且跳过1秒前的动画 animation-direction: normal|reverse|alternate|alternate-reverse; 定义是否循环交替反向播放动画 alternate 动画在奇数次（1、3、5...）正向播放, 在偶数次（2、4、6...）反向播放 alternate-reverse 动画在奇数次（1、3、5...）反向播放, 在偶数次（2、4、6...）正向播放 animation-fill-mode: none|forwards|backwards|both; 规定当动画不播放时, 要应用到元素的样式 forwards 动画结束后停留在最后一帧 backwards 在animation-delay期间启动动画的第一帧属性 both 同时实现forwards与backwards的效果 animation-play-state: paused|running; 控制动画暂停或运行。 @keyframes 设置动画关键帧, 在这里我们用from...to或者百分比来实现自定义的动画

.cube-wrap .cube{ ...... animation: spin 10s linear infinite; } @keyframes spin { from { transform: rotateX(45deg) rotateY(45deg); } to { transform: rotateX(405deg) rotateY(765deg); } }

......

.cube_left .cube_action{ left: -75px; top: 50%; transform: translateY(-50%); } .cube_right .cube_action{ right: -75px; top: 50%; transform: translateY(-50%); } .cube_action{ background-color: #fafafa; border-radius: 50%; cursor: pointer; display: none; width: 40px; height: 40px; opacity: 0.15; position: absolute; transition: opacity 0.5s ease; z-index: 5; } .cube_action:hover{ opacity: 1; } .cube_action::before{ border-bottom: 4px solid #111; border-right: 4px solid #111; content: ''; display: block; height: 25%; left: 50%; position: absolute; top: 50%; width: 25%; transform: translate(-70%, -50%) rotate(-45deg); } .cube_left .cube_action::before{ transform: translate(-40%, -50%) rotate(135deg); } .indicators{ position: absolute; left: 0; right: 0; bottom: -80px; padding: 20px; text-align: center; opacity:0; transition: opacity .3s; } .container:hover .indicators{ opacity: 1; } .indicators .indicator{ background-color: #fafafa; border-radius: 50%; cursor: pointer; display: inline-block; width: 14px; height: 14px; margin: 6px; opacity: .15; } .controller{ display: none; }

.container{ width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -300px; transition: all .5s ease; transform: scale(0.25); } .container:hover { transform: scale(1); } .container:hover .cube-wrap .cube{ animation: entrance .5s ease ; } @keyframes entrance { from { transform: rotateX(-225deg) rotateY(-225deg); } }

.controller:nth-of-type(1):checked ~ .cube{ transform: translateZ(-150px); } .controller:nth-of-type(2):checked ~ .cube{ transform: translateZ(-150px) rotateX(-180deg) ; } .controller:nth-of-type(3):checked ~ .cube{ transform: translateZ(-150px) rotateY(90deg) ; } .controller:nth-of-type(4):checked ~ .cube{ transform: translateZ(-150px) rotateY(-90deg) ; } .controller:nth-of-type(5):checked ~ .cube{ transform: translateZ(-150px) rotateX(-90deg) ; } .controller:nth-of-type(6):checked ~ .cube{ transform: translateZ(-150px) rotateX(90deg) ; }

.container:hover .controller:nth-of-type(1):checked ~ .cube_left .cube_action:nth-of-type(1), .container:hover .controller:nth-of-type(1):checked ~ .cube_right .cube_action:nth-of-type(1){ display: block; } .container:hover .controller:nth-of-type(2):checked ~ .cube_left .cube_action:nth-of-type(2), .container:hover .controller:nth-of-type(2):checked ~ .cube_right .cube_action:nth-of-type(2){ display: block; } ...... ...... ...... .container:hover .controller:nth-of-type(6):checked ~ .cube_left .cube_action:nth-of-type(6), .container:hover .controller:nth-of-type(6):checked ~ .cube_right .cube_action:nth-of-type(6){ display: block; }

重庆分公司，新征程启航

如何使用纯CSS实现一个旋转魔方轮播效果

构建一个能够旋转的立方体

让立方体拥有基本轮播所具有的特性

transition

transform

perspective

preserve-3d

animation

transition属性 --- 过渡效果

transform属性 --- 对元素进行2D或3D转换

perspective属性 --- 让元素实现3D透=视效果

Cube

重要的CSS样式

animation属性

animation详解

Carousel

左右按钮切换

底部按钮切换

先实现左右和底部的CSS样式

其他资讯