利用css制作3d图片旋转

效果:

鼠标触碰时(停止旋转并高亮):

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>6_3d相册_练习</title><style>* {margin: 0;padding: 0;}body {background: url("pic/bac(bac).jpg") no-repeat;background-size: cover;overflow: hidden;}ul {width: 200px;height: 200px;/*background-color: red;*/position: absolute;bottom: 100px;left: 50%;margin-left: -100px;transform-style: preserve-3d;/*transform: rotateX(-10deg);*/animation: sport 6s linear 0s infinite normal;}ul:hover{animation-play-state: paused;}ul:hover li img{opacity: 0.5;}ul li:hover img{opacity: 1;}@keyframes sport {from {transform: rotateX(-10deg) rotateY(0deg);}to {transform: rotateX(-10deg) rotateY(360deg);}}ul li {width: 200px;height: 200px;list-style: none;position: absolute;left: 0;top: 0;background-color: black;}ul li:nth-child(1) {transform: rotateY(60deg) translateZ(200px);}ul li:nth-child(2) {transform: rotateY(120deg) translateZ(200px);}ul li:nth-child(3) {transform: rotateY(180deg) translateZ(200px);}ul li:nth-child(4) {transform: rotateY(240deg) translateZ(200px);}ul li:nth-child(5) {transform: rotateY(300deg) translateZ(200px);}ul li:nth-child(6) {transform: rotateY(360deg) translateZ(200px);}img {width: 200px;height: 200px;border: 5px solid skyblue;box-sizing: border-box;}.heart{width: 250px;height: 157px;position: absolute;left: 100px;bottom: 100px;animation: move 10s linear 0s infinite normal;border-style: none;}@keyframes move {0%{left: 100px;bottom: 100px;opacity: 1;}20%{left: 300px;bottom: 300px;opacity: 0;}40%{left: 500px;bottom: 500px;opacity: 1;}60%{left: 800px;bottom: 300px;opacity: 0;}80%{left: 1200px;bottom: 100px;opacity: 1;}100%{left: 800px;bottom: -200px;}}</style>
</head>
<body><ul><li><img src="pic/%20%20(1).jpg"></li><li><img src="pic/%20%20(2).jpg"></li><li><img src="pic/%20%20(3).jpg"></li><li><img src="pic/%20%20(4).jpg"></li><li><img src="pic/%20%20(5).jpg"></li><li><img src="pic/%20%20(6).jpg"></li>
</ul>
<!--如果不想飘来飘去的,可以将下面的标签注释-->
<img src="pic/1.jpg" class="heart">
<audio src="pic/天气之子(管弦乐改编版).mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

利用css制作3d图片旋转_练习相关推荐

利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时图片爆炸开并切换到下一张图片依次循环首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...

利用css制作3d图片旋转_练习

利用css制作3d图片旋转_练习相关推荐

最新文章

热门文章