HTML + CSS实现图片3D旋转效果

学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片
这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改
然后把格式转变成 .html 的就好了

视频演示链接：https://www.ixigua.com/6954580295748157987

下面是代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D旋转</title><link rel="icon" href="./image/logo.png"><style>body {perspective: 1500px;}section {position: relative;width: 261px;height: 450px;margin: 100px auto;transform-style: preserve-3d;/* animation: name duration timing-function delay iteration-count direction fill-mode;   */animation: rotate 8s linear infinite;/* 图片路径 */background: url(image/dl.png)no-repeat;/* opacity: 0.9; */}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;/* background: url(image/xw.png)no-repeat; */opacity: 0.7;}section div:nth-child(2n) {/* 这里是外层的旋转图片路径 */background: url(image/xw.png)no-repeat;}section div:nth-child(2n+1) {/* 这里是外层旋转的图片路径 */background: url(image/ts.png)no-repeat;}section div:nth-child(1) {/* 在z轴上移动200px */transform: translateZ(300px);}section div:nth-child(2) {/* 在y轴上旋转60度，然后在z轴上移动300像素，下面类似 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}audio{border: none;}</style>
</head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section><!-- 这里是音频链接，不用理会 --><!-- <audio src="./image/Nothing's Gonna Change My Love For You - Westlife.flac" controls loop></audio> -->
</body></html>

HTML + CSS实现图片3D旋转效果相关推荐

CSS图片3D旋转效果
页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
vue实现图片3D旋转效果
代码结构:(不是vue-cli搭建的) <!DOCTYPE html> <html lang="en"> <head> < ...
CSS+HTML实现3D图片旋转效果
CSS+HTML实现3D图片旋转效果在做JavaEE的项目设计的时候,觉得页面过于单调,就学着百度上的图片轮转效果,自己也写了一个,记录一下: index.html部分源码: html{backgr ...
【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...
纯用CSS来实现3D立方体旋转效果
这次用纯CSS来实现3D立方体旋转效果效果如下(可以想象成一个旋转的立方体) HTML部分首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面 <body>< ...
css实现图片的3d旋转
今天的内容是,用css实现图片的3d旋转效果,效果如下: 由于不是视频上传不是很熟悉,所以用图片来简单解释,上述的图片效果,但是图片会绕着一个中心点旋转,像一个圆柱体一样. 下面是具体代码,如果有需要 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
HTML+CSS+JavaScript 实现图片3D展览
因为孤独是生命的常态,所以陪伴才显得格外珍贵. 文章目录一.图片3D展览效果二.代码实现 1. HTML代码 2. CSS代码 3. JavaScript代码一.图片3D展览效果上传图片的大小 ...
html如何图片立体自动旋转,html5如何实现图片的3D旋转效果
html5如何实现图片的3D旋转效果发布时间:2020-12-01 09:54:40 来源:亿速云阅读:192 作者:小新小编给大家分享一下html5如何实现图片的3D旋转效果,希望大家阅读完这 ...
CSS实现鼠标跟随 3D 旋转效果，让交互活起来
一淘模板(56admin.com)给大家介绍一下如何使用CSS实现有意思的鼠标跟随 3D 旋转效果,让交互更加生动,希望对大家有所帮助! 今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实 ...

HTML + CSS实现图片3D旋转效果

HTML + CSS实现图片3D旋转效果相关推荐

最新文章

热门文章