最近发现大佬们博客上绚丽的动态3D立体动画旋转照片，感觉很新颖。先看效果图：
Html 代码如下：
DOCTYPE html>
<html>
<head>
<title>HTML5 3D立体动画照片旋转title>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style text="text/css" >
/*实现立体效果*/
.img {
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
/*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
animation: rotate linear 20s infinite;
}
/*实现动画效果*/
@-webkit-keyframes rotate { /*sofari chrome*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*图片样式*/
.pic{
width: 200px;
height: 200px;
transform: rotateY(0deg) translateZ(100px);
}
style>
<style type="text/css">
/*最外层容器样式*/
.wrap {
width: 100px;
height: 100px;
margin: 150px;
position: relative;
}
/*得到立方体效果*/
.cube {
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
/*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
animation: rotate linear 20s infinite;
}
/*动画旋转的方式*/
/*得到动画效果*/
@-moz-keyframes rotate { /*firefox*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate { /*sofari chrome*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@-o-keyframes rotate { /*opera*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*每张图片的样式*/
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
/*过渡效果*/
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
style>
<script type="text/Javascript" src="js/jquery-3.4.1.min.js">script>
head>
<body>
<div class="wrap">
<div class="cube">
<div class="out_front">
<img src="https://i.loli.net/2018/10/04/5bb5f270969f2.jpeg" class="pic">
div>
<div class="out_back">
<img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg" class="pic">
div>
<div class="out_left">
<img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg" class="pic">
div>
<div class="out_right">
<img src="https://i.loli.net/2018/10/07/5bb9b1ca97948.jpg" class="pic">
div>
<div class="out_top">
<img src="https://i.loli.net/2018/10/04/5bb5f2725c5c7.jpg" class="pic">
div>
<div class="out_bottom">
<img src="https://i.loli.net/2018/10/04/5bb5f27af2e28.jpg" class="pic">
div>
<span class="in_front">
<img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg" class="in_pic">
span>
<span class="in_back">
<img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg" class="in_pic">
span>
<span class="in_left">
<img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg" class="in_pic">
span>
<span class="in_right">
<img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg" class="in_pic">
span>
<span class="in_top">
<img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg" class="in_pic">
span>
<span class="in_bottom">
<img src="https://i.loli.net/2018/10/07/5bb9b2ed867be.jpg" class="in_pic">
span>
div>
div>
body>
html>
另外附上其简单实现demo方便大家学习反思。HTML5 代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 3D立体动画照片旋转-原理title>
<style text="text/css" >
.container{
width: 200px;
height: 200px;
position: relative;
margin:50px auto;
transform: rotateY(15deg) rotateX(-15deg);
transform-style: preserve-3d;
animation:xuanzhuan 8s linear infinite;
}
@keyframes xuanzhuan{
0%{
transform: rotateY(15deg) rotateX(45deg);
}
50%{
transform: rotateY(375deg) rotateX(-45deg);
}
100%{
transform: rotateY(735deg) rotateX(45deg);
}
}
.container:hover{
animation-play-state: paused;
}
.container div.front{
background: red;
transform: translateZ(100px);
}
.container div.back{
background: green;
transform: translateZ(-100px) rotateY(180deg);
}
.container div.left{
background: blue;
transform:translateX(-100px) rotateY(-90deg);
}
.container div.right{
background: yellow;
transform:translateX(100px) rotateY(90deg);
}
.container div.top{
background: pink;
transform:translateY(-100px) rotateX(90deg);
}
.container div.bottom{
background: orange;
transform:translateY(100px) rotateX(-90deg);
}
.container div{
position: absolute;
left:0;
top:0;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 40px;
}
style>
head>
<body>
<div class="container">
<div class="front">frontdiv>
<div class="back">backdiv>
<div class="left">leftdiv>
<div class="right">rightdiv>
<div class="top">topdiv>
<div class="bottom">bottomdiv>
div>
body>
html>
京公网安备 11010802041100号