ブログ園美化-3 D立体動画写真回転(HTML 5)
44362 ワード
最近、大物たちのブログできらびやかなダイナミック3 D立体アニメーションの回転写真を発見し、斬新な感じがします.まず効果図を見ます.
Htmlコードは以下の通りです.
また、demoを簡単に実現することで、反省を学ぶことができます.HTML 5のコードは以下の通りです.
転載先:https://www.cnblogs.com/zhoux955792/p/11518527.html
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を簡単に実現することで、反省を学ぶことができます.HTML 5のコードは以下の通りです.
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>転載先:https://www.cnblogs.com/zhoux955792/p/11518527.html