CSS制作立方体自动旋转相册_css实现旋转相册围绕圆柱

作者：2023面试高手 | 2024-04-19 08:41:18

踩

css实现旋转相册围绕圆柱

制作一个炫酷好看的的立方体旋转相册给自己的女朋友，作为一名程序员应该不是问题，简单易学。关键是还能让女朋友开心，那么我们来简单的说一下如何利用CSS3当中的动画属性来制作立方体旋转效果；
首先我先展示一下我给女朋友做的一个旋转相册效果：

效果链接入口

运用的CSS属性及方法：

利用transform属性中的rotate（旋转）和translate（平移）来对我们的图片进行位置上摆放变换，从而实现一个立方体的效果；
然后在通过animation（动画）属性来实现让我们的立方体自动旋转；

制作过程：

在html布局中先添加一个大盒子div,用来放置我们的所有图片，然后在这个大盒子中加入6个div、6个span。因为制作的是一个双层效果的立方旋转，所以就有div和span分别区分一下内层外层。
然后再分别在div和span中各放入一张图片，一共12张图片，接着就是通过CSS来实现我们效果。
在css实现的过程中我们一定要有一定空间想象力，思想不能局限于在平面上，你可以想象页面是一个三维的视图，在脑海中想象出一个三维的直角坐标系出来，你通过调整图片的位置来去达到一个你想要的效果，一个立方体有六个面，分别是上、下、左、右、前、后，两两一组，形成一对对立面，三对组合在一起就形成一个立方体盒子。
每一组盒子首先让其各自旋转90度形成一个直角夹角（注意一个为正值一个为负值，同时注意方向），然后再让其一个往正值方向平移 100px ，一个往负值方向平移 -100px（也需要注意方向）；

注意： 在写css代码时一定要给最外层的大盒子.wrapper设定一个transform-style:preserve-3d的样式属性，这个属性是指让其内部嵌套的元素可以以3D的视觉来呈现效果，因为我们制作的是一个立方体效果，在空间角度来说属于一个三维效果，所以必须加上这个属性，不然是看不到效果的。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体旋转相册</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="wrapper">   //最外层大盒子
	    <div class="out_frount">
	        <img src="img/1.jpg" class="out_pic">
	    </div>
	    <div class="out_back">
	        <img src="img/2.jpg" class="out_pic">
	    </div>
	    <div class&
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/450857