CSS3使用过渡转换和动画实现3D旋转盒子

太过爱你忘了你带给我的痛 2023-06-27 03:42 17阅读 0赞

### 目录 ###

*   *  过渡（transition）
     *  转换（transform）
     *  动画（animation）
     *  小案例（3D相册）

在网络快速发展的今天，静态web页面早已经不满足人们的需求，因此我们需要更加炫酷的动画渲染页面，使得我们的页面逼格满满，在css3中动画的表现形式有 **过渡**， **2d动画**和 **3d动画**，给用户一种耳目一新的全新体验。

## 过渡（transition） ##

个人理解的过渡指的是**某种元素**的**某种状态**在一定的**时间段**内发生的**变化**叫做过渡。

div:hover{ 
    	width: 200px;
    	height: 200px;
    }

![在这里插入图片描述][20200102205524381.gif_pic_center]  
当我们鼠标移动到div元素中元素放大，此时感觉很突兀，我们给它一点过渡的效果。

transition: all 3s;

![在这里插入图片描述][20200102205809489.gif_pic_center]

*  `transition：style，time`
    
     *  `style`：过渡的样式，也可以设置`all`全部样式。
     *  `time`：设置过渡的时间，单位为秒`（s）`。

**设置过渡的切换速度（transition-timing-function）**

`linear`：全程以相同的速度过渡  
`ease`：先慢速，然后变快，在慢速的过渡。  
`ease-in`：以慢速开始的过渡。  
`ease-out`：以慢速结束的过渡。  
`ease-in-out`：以慢速开始和慢速结束的过渡。

关于`linear`我们很容易理解，但是关于`ease`我们还是不能够很形象的看懂，来看一下曲线的路径。  
![在这里插入图片描述][20200107205637779.png]

## 转换（transform） ##

**2D转换**

在2D转换中，我们想象页面为一个2D平面，在这个平面里我们可以有`移动（translate）`，`旋转（rotate）`，`缩放（scale）`和`倾斜（skew）`的方法。

**设置元素的参考点（transform-origin）**

当然在我们做转换的过程中，我们是有着一个参考点，我们需要**依据参考点来进行转换**，因此我们也可以来设置参考点。

transform-origin: x y;

> `x`，`y`的除了可以设置百分比和具体的位置外；  
> `x`轴的位置可以设置为`left`，`center`，`right`；  
> `y`轴的位置可以位置为`top`，`center`，`bottom`。

**移动（translate）**

transform: translate(100px,100px);

设置元素在x轴与y轴偏移的位置，以下将元素向x轴移动了100px，向y轴移动了100px。灰色元素仅做对照使用，黑色元素为移动后的元素。  
![在这里插入图片描述][2020010620533666.png_pic_center]

**旋转（rotate）**

transform: rotate(45deg);

设置元素顺时针旋转，以下讲元素旋转了45°。  
![在这里插入图片描述][20200106204931140.png_pic_center]  
**缩放（scale）**

transform: scale(1.5,2);

缩放是将原元素按照设置的倍数进行缩放。以下`x`放大1.5倍，`y`放大2倍。

![在这里插入图片描述][20200106205904661.png_pic_center]  
**倾斜（skew）**

transform: skew(15deg);

将元素倾斜15度。  
![在这里插入图片描述][20200106210553596.png_pic_center]

**3D转换**

在2D转转换中，我们无非只是一种视觉的原因，让我们看起来不那么形象具体，在现实生活中3D能够看到更加形象具体的的图像无非是人在不同的方向距离的状态下看到的不同的图像从而感受到3D的图像，而在我们的JavaScript中也是模拟了人看物体的`景深（perspective）`，`位置（perspective-origin）`，并且`开启3D状态（transform-style: preserve-3d）`。

**开启3D状态（transform-style: preserve-3d）**

在进行3d装换时需要先设置父容器为3d状态才浏览器才会进行3d显示。

**景深（perspective）**

景深就是设置眼睛距离位置的视距。

div{ 
    	/*设置3d视角*/
    	transform-style: preserve-3d;
    }
    
    div>div{ 
    	width: 100px;
    	height: 100px;
    	background-color: rgba(255,0,0,0.5);
    	// 设置元素偏移Z轴的位置
    	transform: translateZ(100px);
    }

var i = 0;
    setInterval(function (argument) { 
    	i+=2;
    	document.getElementsByTagName('div')[0].style.perspective = i + 'px';
    },50)

我们设置定时器，将景深的距离依次增加，我们发现此元素的越来越小，这不就是正和我们的眼睛一样吗，**当距离元素越远时，元素显示的越小。**

当然**景深不可能为0**，如果说在现实生活中为视距为0，那我们就不会看见这个元素。  
![在这里插入图片描述][20200107194043318.gif_pic_center]  
**位置（perspective-origin）**

俗话说，千人千面。3d也是一样，我们在不同的位置下观看相同的东西，眼睛反馈回来给我们是不同的样式。

body{ 
    	transform-style: preserve-3d;
    	perspective: 800px;
    }

document.body.onmousemove = function (e) { 
    	this.style.perspectiveOrigin = e.pageX + "px " + e.pageY + "px" ;
    }

为了更好的演示效果，我们将body设置为3d，将鼠标的位置代表的眼睛的位置，我们移动鼠标可以看见不同状态的3d效果。  
![在这里插入图片描述][20200107200152147.gif_pic_center]

## 动画（animation） ##

在css3中动画是极其方便的，它甚至不用写JavaScript代码就可以实现运动的过程，而创建动画就是想变换的过程有过渡的效果。

@keyframes run{ 
    	form{ 
    		width: 100px;
    		height: 100px;
    	}
    	to{ 
    		width: 200px;
    		height: 200px;
    	}
    }
    /*百分比形式*/
    @keyframes run{ 
    	0%{ 
    		width: 100px;
    		height: 100px;
    	}
    	50%{ 
    		width: 150px;
    		height: 150px;
    	}
    	100%{ 
    		width: 200px;
    		height: 200px;
    	}
    }

创建一个名为run的动画，且从`form`的状态开始，到`to`的状态结束。如果说还有其他的过程我们也可以写成百分比的形式。

div:hover{ 
    	animation: run 3s;
    }

当鼠标移入元素上时我们开始运行动画，且在3s中完成这个动画，并且回到原始状态。

![在这里插入图片描述][20200107201905468.gif_pic_center]

**设置动画的速度状态（animation-timing-function）**

和过渡的是一样的道理，可以翻到开篇的位置进行查看。

**设置动画播放的次数（animation-iteration-count）**

我们的动画默认播放一次，也就是默认值为1，当我们我们也可以让他重复播放。

div:hover{ 
    	animation: run 3s ease infinite;
    }
    @keyframes run{ 
    	form{ 
    		left: calc(50% - 50px);
    		top: calc(50% - 50px);
    	}
    	to{ 
    		left: calc(50% + 50px);
    		top: calc(50% + 50px);
    	}
    }

![在这里插入图片描述][2020010721032673.gif_pic_center]

**设置动画的周期是否交替反向播放（animation-direction）**

动画执行时我们可以设置动画的播放方向，当然动画被设置只播放一次将无法起作用。

div:hover{ 
    	animation: run 3s ease infinite;
    	// 设置动画奇数正向播放，偶数反向播放。
    	animation-direction: alternate;
    }
    
    @keyframes run{ 
    	form{ 
    		left: calc(50% - 50px);
    		top: calc(50% - 50px);
    	}
    	to{ 
    		left: calc(50% + 50px);
    		top: calc(50% + 50px);
    	}
    }

![在这里插入图片描述][20200108185250739.gif_pic_center]  
以上设置`animation-direction: alternate` 奇数正向播放，偶数反向播放，当然还有`animation-direction: alternate-reverse` 奇数反向播放，奇数正向播放；`animation-direction: reverse` 动画反向播放。

## 小案例（3D相册） ##

关于css3过渡，转换和动画就差不多了，既然你都看到这里来了，不妨再完成一个动画的小案例吧。  
![在这里插入图片描述][20200108190508485.gif_pic_center]  
**开启3d模式**

我们设置body开启3d模式，给一个容器居中，并且也开启3d模式。

*{ 
    	margin: 0;
    	padding: 0;
    }
    
    :root,body{ 
    	height: 100%;
    }
    
    body{ 
    	perspective: 800px;
    	perspective-origin:50%;
    	transform-style: preserve-3d;
    }
    
    .contain{ 
    	width: 200px;
    	height: 200px;
    	position: absolute;
    	top: calc(50% - 100px);
    	left: calc(50% - 100px);
    	
    	/*设置3d*/
    	transform-style: preserve-3d;
    }

**创建上下左右前后的容器**

.contain>div{ 
    	width: 200px;
    	height: 200px;
    	border: 1px solid;
    	position: absolute;
    }

**设置前后两个面的位置**

.contain>div:nth-of-type(1){ 
    	background: url(images/1.jpeg) no-repeat;
    	background-size: cover;
    	transform: translateZ(-100px);
    }
    .contain>div:nth-of-type(6){ 
    	background: url(images/6.jpeg) no-repeat;
    	background-size: cover;
    	transform: translateZ(100px);
    }

**设置左右两个面的位置**

.contain>div:nth-of-type(4){
    	background: url(images/4.jpeg) no-repeat;
    	background-size: cover;
    	transform: rotateY(90deg);
    	margin-left: 100px;
    }
    .contain>div:nth-of-type(5){
    	background: url(images/5.jpeg) no-repeat;
    	background-size: cover;
    	transform: rotateY(90deg);
    	margin-left: -100px;
    }

**设置上下两个面的位置**

.contain>div:nth-of-type(4){ 
    	background: url(images/2.jpeg) no-repeat;
    	background-size: cover;
    	transform: rotateX(90deg);
    	margin-top: 100px;
    }
    
    .contain>div:nth-of-type(3){ 
    	background: url(images/3.jpeg) no-repeat;
    	background-size: cover;
    	transform: rotateX(90deg);
    	margin-top: -100px;
    }

**设置动画**

.contain{ 
    	animation: run 20s linear infinite;
    }
    @keyframes run{ 
    	from{ 
    		transform: rotateY(0deg) rotateX(0deg);
    	}
    	50%{ 
    		transform: rotateY(180deg) rotateX(180deg);
    	}
    	to{ 
    		transform: rotateY(360deg) rotateX(360deg);
    	}
    }

[20200102205524381.gif_pic_center]: https://img-blog.csdnimg.cn/20200102205524381.gif#pic_center
[20200102205809489.gif_pic_center]: https://img-blog.csdnimg.cn/20200102205809489.gif#pic_center
[20200107205637779.png]: https://img-blog.csdnimg.cn/20200107205637779.png
[2020010620533666.png_pic_center]: https://img-blog.csdnimg.cn/2020010620533666.png#pic_center
[20200106204931140.png_pic_center]: https://img-blog.csdnimg.cn/20200106204931140.png#pic_center
[20200106205904661.png_pic_center]: https://img-blog.csdnimg.cn/20200106205904661.png#pic_center
[20200106210553596.png_pic_center]: https://img-blog.csdnimg.cn/20200106210553596.png#pic_center
[20200107194043318.gif_pic_center]: https://img-blog.csdnimg.cn/20200107194043318.gif#pic_center
[20200107200152147.gif_pic_center]: https://img-blog.csdnimg.cn/20200107200152147.gif#pic_center
[20200107201905468.gif_pic_center]: https://img-blog.csdnimg.cn/20200107201905468.gif#pic_center
[2020010721032673.gif_pic_center]: https://img-blog.csdnimg.cn/2020010721032673.gif#pic_center
[20200108185250739.gif_pic_center]: https://img-blog.csdnimg.cn/20200108185250739.gif#pic_center
[20200108190508485.gif_pic_center]: https://img-blog.csdnimg.cn/20200108190508485.gif#pic_center