html5 3D旋转案例

最新推荐文章于 2024-05-01 12:03:21 发布
最新推荐文章于 2024-05-01 12:03:21 发布
阅读量203 收藏
点赞数
分类专栏： css html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanzongshen/article/details/117693481
版权
html 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

html5 3D旋转案例

实现效果为内外6张图片旋转，图片为网络上的图片

<<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>凡总神</title><base target="_blank" />
    <link rel="stylesheet" href="http://hovertree.com/texiao/css3/34/hovertree.css" />
</head>
<style>
	.hovertreeinfo a {
		text-decoration: none;
		color: red;
		margin-top: 40%;
		font-size: 25px;
		font-weight: bold;
		font-family: "franklin gothic book";
	}
	.piclast{
		margin: 0 auto;
		width: 15%;
	}
</style>
<body>
    <div class="hovertreeinfo">
    <h2>凡总神3D回転の勉強します</h2></div>
    <!--/*外层最大容器*/-->
    <div class="wrap">
        <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="https://images2.alphacoders.com/606/606275.jpg" class="pic" />
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="https://images4.alphacoders.com/616/616945.png" class="pic" />
            </div>
            <!--左图片 -->
            <div class="out_left">
                <img src="https://images4.alphacoders.com/123/123036.jpg" class="pic" />
            </div>
            <div class="out_right">
                <img src="https://images7.alphacoders.com/401/401837.jpg" class="pic" />
            </div>
            <div class="out_top">
                <img src="https://images4.alphacoders.com/672/672740.png" class="pic" />
            </div>
            <div class="out_bottom">
                <img src="https://images7.alphacoders.com/711/711494.jpg" class="pic" />
            </div>
            <!--小正方体 -->
            <span class="in_front">
                <img src="https://images6.alphacoders.com/782/782172.png" class="in_pic" />
            </span>
            <span class="in_back">
                <img src="https://images3.alphacoders.com/144/144565.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="https://images3.alphacoders.com/820/82029.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="https://images2.alphacoders.com/100/1007550.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="https://images3.alphacoders.com/105/1053268.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="https://images6.alphacoders.com/110/1108435.jpg" class="in_pic" />
            </span>
        </div>
    </div>
    <div class="hovertreeinfo"><a href="https://fanyi.baidu.com/#jp/zh/%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AE%E3%81%93%E3%81%A8%E3%81%8C%E5%A5%BD%E3%81%8D%E3%81%A7%E3%81%99">点我有惊喜</a>
    <br /><br />
    <br /><br />
    <img class="piclast" src="https://img-blog.csdnimg.cn/2021030713005042.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZhbnpvbmdzaGVu,size_16,color_FFFFFF,t_70#pic_center" alt="二维码"/>
    </div>
</body>
</html>
Fanzongshen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D无限圆柱体Canvas特效
04-25
3D无限圆柱体Canvas特效是一款基于canvas绘制3D立体的圆柱体矩阵排列旋转动画特效。
JavaScript特效3D可旋转轮播图
weixin_43898383的博客
07-24 782
3D轮播图特效 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
m0_60388149的博客
03-19 420
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**img/1.jpgimg/2.jpgimg/3.jpgimg/4.jpgimg/5.jpgimg/6.jpg。
html实现圆桶效果,如何用纯css3绘制圆柱体
weixin_42399342的博客
06-03 756
Document.yuanzhu{ position: relative; height: 200px; width: 50px; margin-top: 30px; background:red;margin:30px auto; z-index: 999 }.yuanzhu:before{position: absolute; top:-10px; content: ""; display:...
css3d旋转盒子实例
11-07
html5+css3-css3d旋转盒子实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
3D旋转实例
11-04
HTML5 CANVAS 3D 立体三维展示厅效果-3D旋转实例
HTML5 Canvas酷似冰山的3D柱状图表
08-23
今天我们要为大家分享一个外观很不一样的HTML5柱状图表应用，它的外观就像一座座冰山矗立在海面上，通过海面的高低来表示柱形图数据的高低，非常形象和直观。同时我们还利用HTML5 Canvas技术模拟海面波浪起伏的动画特效，也可以同时展示多组数据。
html实现圆桶效果,3D圆柱体.html
weixin_39884872的博客
06-03 537
3D旋转圆柱体*{margin: 0;padding: 0}div{width: 105px;height: 150px;margin: 50px auto;perspective: 1000px;-webkit-perspective: 1000px;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}ul{wid...
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
热门推荐
diviner_s的博客
06-12 1万+
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。 文章目录动态三维柱状图三维柱状图数据存储柱状图配置tooltip配置xAxis3D配置yAxis3D配置zAxi.
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
生产队的刘同学
08-28 2185
CSS创建3D旋转圆柱
Html5特效案例源码 XMHtml5Demo.rar
11-05
一、源码描述 该源码主要是一些Html5特效源码，界面比较炫目，现在分享出来，仅供大家 学习交流使用，感兴趣的可以下载学习一下。 二、功能介绍 该源码主要包括炫酷的CSS3 3D旋转按钮对话框、HTML5 3D立体美女墙相册、 HTML5 Canvas可拖动的弹性大树摇摆动画三个小例子。 三、注意事项 1、开发环境为Visual Studio 2010，无数据库， 使用.net 4.0开发。 2、该源码仅供学习交流使用。
jQuery实现炫丽的3d旋转星空效果
01-19
本文实例讲述了jQuery实现炫丽的3d旋转星空效果。分享给大家供大家参考，具体如下： 该特效也是在Jquery插件库中找到的，感觉效果不错，说不定以后项目中要有绚丽的星空背景，拿来即用，收藏了下。 下载解压后的目录结构 index.html页面代码： <!doctype html> <html lang=zh> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1> <meta name=viewport content=width=de
3d旋转相册—css3高级进阶
04-13
1.适合人群：有一定的编程经验。 2.需要有HTML基础知识以及CSS初中级知识，想要进阶CSS3高级的小伙伴，那么这个案例将对你有所帮助，涉及的动画知识点有扭曲、平移、旋转等。
3d旋转相册源码
12-16
3d旋转相册源码，用纯CSS3代码写的一个小案例，难度不大
用html画一个四叶草
liulang68的博客
04-20 1741
以上是部分代码，需要请看主页加联系方式。
在html中使用数学公式latex
bigcrab的博客
04-27 540
来自 https://katex.org/docs/autorender 可以自动渲染。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1281
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
HTML_CSS学习:CSSLearning
最新发布
m0_74972727的博客
05-01 40
【代码】HTML_CSS学习:CSSLearning。
html正方体3d旋转
10-25
HTML正方体3D旋转可以通过CSS中的transform属性实现。首先需要定义一个正方体的HTML结构，然后通过CSS设置其宽高和背景颜色，再使用transform-style: preserve-3d;属性将其转换为3D空间中的元素。接着，可以使用transform属性中的rotateX()、rotateY()、rotateZ()方法来分别对正方体进行绕X轴、Y轴、Z轴的旋转。同时，还可以使用scaleX()、scaleY()方法来对正方体进行缩放。最后，使用transform-origin属性来设置旋转的中心点。 下面是一个HTML正方体3D旋转的示例代码： ```html <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> <div class="face top"></div> <div class="face bottom"></div> </div> ``` ```css .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform-origin: center center; animation: rotate 5s infinite linear; } .face { position: absolute; width: 200px; height: 200px; background-color: #ccc; border: 1px solid #999; } .front { transform: translateZ(100px); } .back { transform: translateZ(-100px) rotateY(180deg); } .left { transform: translateX(-100px) rotateY(-90deg); } .right { transform: translateX(100px) rotateY(90deg); } .top { transform: translateY(-100px) rotateX(90deg); } .bottom { transform: translateY(100px) rotateX(-90deg); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } ``` 这段代码定义了一个200px * 200px的正方体，通过transform-style: preserve-3d;属性将其转换为3D空间中的元素，并使用transform-origin属性将旋转中心点设置为正方体的中心。接着，通过定义6个面的CSS样式，使用transform属性中的translateZ()、rotateY()、rotateX()方法来对正方体进行旋转和平移。最后，使用animation属性来定义一个旋转动画，使正方体不断绕Y轴旋转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值