各位读者大家好,我是一只小菜鸟。目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。
本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动画效果做出一个立体旋转的照片墙。效果如下图.
想要做成这样的效果其实是很简单的,在开始做之前了,我们先来了解一下它的原理吧!首先就是利用定位将图片居中显示,其次利用3D空间效果将图片位移到对应的位置上再加上一点偏转角度,然后就可以定义一个动画,规定动画的运转就可以了。下面是代码。
css代码:
/* 去除所有标签的内外边距 */
* {
margin: 0;
padding: 0;
}
/* 给body设置一个背景 */
body {
/* 引入背景图片 */
background: url(../image/7.jpg) no-repeat;
/* 让背景图充满这个屏幕 */
background-size: 100%;
}
.box {
/* 给父盒子设置相对定位 */
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
/* 开启3d效果, */
transform-style: preserve-3d;
transform: rotate(30deg);
/* 调用动画 */
animation: move 8s linear infinite;
}
.box1 {
position: relative;
width: 400px;
height: 400px;
transform-style: preserve-3d;
animation: run 8s linear infinite;
}
.box div {
/* 给子盒子设置绝对定位,方便更改其位置 */
position: absolute;
width: 400px;
height: 400px;
}
.box div img {
width: 400px;
height: 400px;
}
/* 利用3D空间转换,将图片定位到相应位置 */
.one {
transform: translateZ(400px);
}
.two {
transform: translateZ(200px) translateX(400px) rotateY(60deg);
}
.three {
transform: translateZ(200px) translateX(-400px) rotateY(-60deg);
}
.four {
transform: translateZ(-200px) translateX(400px) rotateY(-60deg);
}
.five {
transform: translateZ(-200px) translateX(-400px) rotateY(60deg);
}
.six {
transform: translateZ(-400px);
}
/* 定义动画 */
@keyframes move {
0% {
transform: rotateX(30deg);
}
50% {
transform: rotateX(-30deg);
}
100% {
transform: rotateX(30deg);
}
}
/* 定义动画 */
@keyframes run {
100% {
transform: rotateY(-360deg);
}
}
.box:hover {
animation-play-state: paused;
}
.box:hover .box1 {
animation-play-state: paused;
}
HTML代码
<!DOCTYPE html>
<html lang="en&#