文章目录
1、CSS动画样式
2、HTML图片放置
前言
首先呢,要先理解几个重要知识点,然后梳理思路,构建3d盒子模型、3d动画执行程序以及将动画应用到元素、3d动画样式等
1、css动画样式
<1>用盒子模型作为载体,将动画应用到元素,代码如下:
>>>简易分析:
动画的样式,从一种样式渐变到,另一种样式中,使用css动画,必须先为动画指定一些关键帧,目的是为了保持元素在特定的时间内,完成所设定的样式。
.box{
width: 400px;
height: 400px;
margin-left: 500px;
margin-top: 150px;
position: relative;
transform-style: preserve-3d;
transform-origin: 200px 200px 200px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation-name: kuli;
animation-duration: 10s;
animation-iteration-count: infinite;
# animation: kuli 10s ease infinite;
}
>>>代码包含几个重要知识点:
/* 设置被嵌套元素以3D样式显示 */
transform-style: preserve-3d;
/* 设置3D元素的位置 */
transform-origin: 200px 200px 200px;
/* 通过rotate()方法,3D元素围绕着X、Y、Z轴给定的度数进行旋转 */
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
/* 设置3d动画执行名称 */
animation-name: kuli;
/* 指定动画完成一个循环需要多长时间 */
animation-duration: 10s;
/* infinite 设置动画永远运行(如死循环) */
animation-iteration-count: infinite;
/* ease 指定动画的速度曲线 慢>快>慢 */
/* linear 指定从开始到结束具有相同速度的动画效果(匀速变化) */
/* 下面的样式 ease 可以换为 linear */
# animation: kuli 10s ease infinite;
<2>@keyframes动画代码,代码如下:
>>>简易分析:
@keyframes:在指定css样式中,动画在特定的时间内,是从一种样式渐变为另一种样式,在这渐变之前,要先使动画生效,即必须将动画绑定到所属元素当中,在代码当中将 “kuli”动画绑定到元素,动画是持续10秒, 当动画完成20%、40%、60%、80%时围绕着x、y、z轴改变旋转度数,直到100%时,再次更改,并重复
@keyframes kuli{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
20%{
transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
}
40%{
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);
}
60%{
transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);
}
80%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
<3>标签样式及图片样式,代码如下:
.box div{
width: 400px;
height: 400px;
position: absolute;
}
.box div img{
width: 400px;
height: 400px;
/* 行内元素垂直方向的对齐,注意区别于块元素垂直方向的对齐 */
vertical-align: top;
}
.box div:nth-child(2){
transform-origin: 0 0;
transform: rotateY(-90deg);
}
.box div:nth-child(3){
/* 被转换3D元素的位置 */
transform-origin: 400px 0;
transform: rotateY(90deg);
}
.box div:nth-child(4){
transform-origin: 0 0;
transform: rotateX(90deg);
}
.box div:nth-child(5){
transform-origin: 0 400px;
transform: rotateX(-90deg);
}
.box div:nth-child(6){
/* 转换属性,定义3D转化,仅用于Z轴 */
transform: translateZ(400px);
}
2、html图片放置
* 注意图片的放置,自己可以选择所喜欢的类型,放在文件夹所创建的目录里面即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d正方体立体照片墙</title>
<link rel="stylesheet" href="css/box.css">
</head>
<body>
<div class="box">
<div><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
<div><img src="img/04.jpg" alt=""></div>
<div><img src="img/05.jpg" alt=""></div>
<div><img src="img/06.jpg" alt=""></div>
</div>
</body>
</html>
>>>整体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d立体照片墙</title>
<style type="text/css">
/* 用盒子模型作为载体,将动画应用到元素 */
.box{
width: 400px;
height: 400px;
margin-left: 500px;
margin-top: 150px;
position: relative;
transform-style: preserve-3d;
transform-origin: 200px 200px 200px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation-name: kuli;
animation-duration: 10s;
animation-iteration-count: infinite;
animation: kuli 10s ease infinite;
}
/* @keyframes动画代码 */
@keyframes kuli{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
20%{
transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
}
40%{
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);
}
60%{
transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);
}
80%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.box div{
width: 400px;
height: 400px;
position: absolute;
}
.box div img{
width: 400px;
height: 400px;
/* 行内元素垂直方向的对齐,注意区别于块元素垂直方向的对齐 */
vertical-align: top;
}
.box div:nth-child(2){
transform-origin: 0 0;
transform: rotateY(-90deg);
}
.box div:nth-child(3){
/* 被转换3D元素的位置 */
transform-origin: 400px 0;
transform: rotateY(90deg);
}
.box div:nth-child(4){
transform-origin: 0 0;
transform: rotateX(90deg);
}
.box div:nth-child(5){
transform-origin: 0 400px;
transform: rotateX(-90deg);
}
.box div:nth-child(6){
/* 转换属性,定义3D转化,仅用于Z轴 */
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box">
<div><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
<div><img src="img/04.jpg" alt=""></div>
<div><img src="img/05.jpg" alt=""></div>
<div><img src="img/06.jpg" alt=""></div>
</div>
</body>
</html>