实现功能:
点击下方图片可翻转到对应图片
实现思路:
魔方中用<li>
标签包含图片,方便用<ul>
包裹,后面给ul添加3D模式便可进行翻折
比较简单不过多讲解,代码如下:
清除样式默认的内外边距,直接上代码:
主要是给父元素设置transform-style: preserver-3d;
,对所有li子元素进行3D转换,后面便于用transform折叠这里用子绝父相的定位模式设定,是为了让ul下的所有li都放在父元素ul框内
也就是给每个li加定位——top: 0 ;
和 left: 0;
如果你设置的图片的原本尺寸并不是一致,你需要给img强制设置宽高,这样图片会强制更改自身尺寸
transition属性设置:
代码实现如下:
rotateX
就是以X轴为对称中翻转,朝上为正,朝下为负,Y同理代码实现如下:
也就是实现下面效果
这一块比较简单,牛牛就不多做介绍,讲一个文章出现过的知识点——background-size: contain;
该属性会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
这里需要 一定的理解能力,建议配合后面的JS代码一起看
讲一下具体思路:
最关键的部分来了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转魔方相册</title> <style> *{ margin: 0; padding: 0; } body{ background-color: rgba(0, 0, 0, 0.8); } /* 魔方样式设置部分 */ .square{ width: 200px; height: 200px; margin: 200px auto; margin-bottom: 100px; } ul{ position: relative; transform-style: preserve-3d; transition: all .7s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 100%; height: 100%; } li{ /* display: inline-block; */ position: absolute; top: 0; left: 0; list-style: none; width: 100%; height: 100%; border: 1px solid pink; } img{ width: 200px; height: 200px; } /* 初始位置 */ /* ul{ transform: translateZ(-100px) rotateX(-15deg) rotateY(15deg); } */ /* 折叠图片,构成魔方 */ ul li:nth-child(1) { transform: translateZ(100px); } ul li:nth-child(2) { transform: rotateY(180deg) translateZ(100px); } ul li:nth-child(3) { transform: rotateY(90deg) translateZ(100px); } ul li:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); } ul li:nth-child(5) { transform: rotateX(90deg) translateZ(100px); } ul li:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); } /* 下方是点击目录 */ .img_1{ background-image: url(2.jpeg); } .img_2{ background-image: url(1.jpeg); } .img_3{ background-image: url(3.jpeg); } .img_4{ background-image: url(4.jpeg); } .img_5{ background-image: url(5.jpeg); } .img_6{ background-image: url(6.jpeg); } span{ display: inline-block; width: 50px; height: 25px; background-size: contain; border: 1px solid white; } .toc{ width: 350px; margin: 0 auto; } /* 辅助JS块样式设置 */ .square .img_1 { transform: translateZ(-100px); } .square .img_2 { transform: translateZ(-100px) rotateX(-180deg) ; } .square .img_3 { transform: translateZ(-100px) rotateY(-90deg) ; } .square .img_4 { transform: translateZ(-100px) rotateY(90deg) ; } .square .img_5 { transform: translateZ(-100px) rotateX(-90deg) ; } .square .img_6 { transform: translateZ(-100px) rotateX(90deg) ; } </style> </head> <body> <!-- 魔方 --> <div class="square"> <ul class="s-img"> <li><img src="2.jpeg"></li> <li><img src="1.jpeg"></li> <li><img src="3.jpeg"></li> <li><img src="4.jpeg"></li> <li><img src="5.jpeg"></li> <li><img src="6.jpeg"></li> </ul> </div> <!-- 手动点击旋转 --> <div class="toc"> <span class="img_1"></span> <span class="img_2"></span> <span class="img_3"></span> <span class="img_4"></span> <span class="img_5"></span> <span class="img_6"></span> </div> <!-- JS --> <script src="cube.js"> </script> </body> </html>
window.onload = function(){ //toc目录设置 var toc_img = document.querySelector('.toc'); var square = document.querySelector('ul'); var p_img = square.classList; var img_button = toc_img.querySelectorAll('span'); var flage = ''; img_button[0].onclick = function(e) { flage = img_button[0].className; square.setAttribute('class', flage); } img_button[1].onclick = function(e) { flage = img_button[1].className; square.setAttribute('class', flage); } img_button[2].onclick = function(e) { flage = img_button[2].className; square.setAttribute('class', flage); } img_button[3].onclick = function(e) { flage = img_button[3].className; square.setAttribute('class', flage); } img_button[4].onclick = function(e) { flage = img_button[4].className; square.setAttribute('class', flage); } img_button[5].onclick = function(e) { flage = img_button[5].className; square.setAttribute('class',flage); } }