html3d盒子,css 3D盒子（原创）

最新推荐文章于 2024-10-26 11:34:16 发布
转载 最新推荐文章于 2024-10-26 11:34:16 发布
· 248 阅读 · 0
文章标签：

#html3d盒子

@-webkit-keyframes spin {

0% {

-webkit-transform:rotateY(0deg);

transform:rotateY(0deg)

}

100% {

-webkit-transform:rotateY(360deg);

transform:rotateY(360deg)

}

}@-moz-keyframes spin {

0% {

-moz-transform:rotateY(0deg);

transform:rotateY(0deg)

}

100% {

-moz-transform:rotateY(360deg);

transform:rotateY(360deg)

}

}@-ms-keyframes spin {

0% {

-ms-transform:rotateY(0deg);

transform:rotateY(0deg)

}

100% {

-ms-transform:rotateY(360deg);

transform:rotateY(360deg)

}

}@-o-keyframes spin {

0% {

-o-transform:rotateY(0deg);

transform:rotateY(0deg)

}

100% {

-o-transform:rotateY(360deg);

transform:rotateY(360deg)

}

}@keyframes spin {

0% {

transform:rotateY(0deg)

}

100% {

transform:rotateY(360deg)

}

}.stage {

width:300px;

height:300px;

margin:15px auto;

position:relative;

-webkit-perspective:300px;

-moz-perspective:300px;

-ms-perspective:300px;

-o-perspective:300px;

perspective:300px;

}

.container {

top:50%;

left:50%;

margin:-100px 0 0 -100px;

position:absolute;

-webkit-transform:translateZ(-100px);

-moz-transform:translateZ(-100px);

-ms-transform:translateZ(-100px);

-o-transform:translateZ(-100px);

transform:translateZ(-100px);

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

}

.container:hover {

-moz-animation:spin 5s linear infinite;

-o-animation:spin 5s linear infinite;

-webkit-animation:spin 5s linear infinite;

animation:spin 5s linear infinite;

}

.side {

background:rgba(255,0,0,0.3);

border:1px solid red;

font-size:60px;

font-weight:bold;

color:#fff;

height:196px;

line-height:196px;

position:absolute;

text-align:center;

text-shadow:0 -1px 0 rgba(0,0,0,0.2);

text-transform:uppercase;

width:196px;

}

.front {

-webkit-transform:translateZ(100px);

-moz-transform:translateZ(100px);

-ms-transform:translateZ(100px);

-o-transform:translateZ(100px);

transform:translateZ(100px);

}

.back {

-webkit-transform:rotateX(180deg) translateZ(100px);

-moz-transform:rotateX(180deg) translateZ(100px);

-ms-transform:rotateX(180deg) translateZ(100px);

-o-transform:rotateX(180deg) translateZ(100px);

transform:rotateX(180deg) translateZ(100px);

}

.left {

-webkit-transform:rotateY(-90deg) translateZ(100px);

-moz-transform:rotateY(-90deg) translateZ(100px);

-ms-transform:rotateY(-90deg) translateZ(100px);

-o-transform:rotateY(-90deg) translateZ(100px);

transform:rotateY(-90deg) translateZ(100px);

}

.right {

-webkit-transform:rotateY(90deg) translateZ(100px);

-moz-transform:rotateY(90deg) translateZ(100px);

-ms-transform:rotateY(90deg) translateZ(100px);

-o-transform:rotateY(90deg) translateZ(100px);

transform:rotateY(90deg) translateZ(100px);

}

.top {

-webkit-transform:rotateX(90deg) translateZ(100px);

-moz-transform:rotateX(90deg) translateZ(100px);

-ms-transform:rotateX(90deg) translateZ(100px);

-o-transform:rotateX(90deg) translateZ(100px);

transform:rotateX(90deg) translateZ(100px);

}

.bottom {

-webkit-transform:rotateX(-90deg) translateZ(100px);

-moz-transform:rotateX(-90deg) translateZ(100px);

-ms-transform:rotateX(-90deg) translateZ(100px);

-o-transform:rotateX(-90deg) translateZ(100px);

transform:rotateX(-90deg) translateZ(100px);

}

周博磊
关注
HTML + CSS 实现炫彩 3d 盒子
qq_43477721的博客
04-23 1275
B站地址https://www.bilibili.com/video/BV1jC4y14739?from=search&seid=14906173926344311066 看完之后，总有一种自己 CSS 白学的感觉，太卑微了，向大佬低头???????????????????????????????? 下面的评论有链接，里面有素材，（真是太贴心了） <!DOCTYPE html> <html lang="en">...
制作一个简单HTML静态网页（HTML+CSS）
weixin__BJ050106的博客
08-14 1424
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获优快云年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒......
CSS制作3D盒子
xianghai
11-07 1606
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html{ perspec
HTML+css做炫酷的3d盒子反转
文情
07-03 722
3d盒子反战 效果如图如下： HTML重要的代码如下： <ul> <li> <div class="box"> <div class="front">目录</div> <div class="bottom">市场调研</div> </div> </li>
html立体盒子
幸福诗歌的博客
04-29 1885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3-3d变换</title> <style> *{ margin:0; padding:0; } #content{
HTML5基础加强css样式篇（css属性transform 函数（3D）3D盒子）（二十七）
余正源的博客
03-24 633
1
用HTML+CSS做一个漂亮简单的音乐网站
VX_WJ88950106的博客
08-08 557
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
制作一个简单HTML中华传统文化网页（HTML+CSS）
最新发布
HTML网页设计 专注大学生网页设计
10-26 1108
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html简单盒子代码,CSS3 3D盒子超简单制作
weixin_34334554的博客
06-09 2363
这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标...
html实现3D盒子动画
06-29
html实现3D盒子动画
HTML5 jQuery实现3D旋转的Google搜索框盒子特效.rar
07-10
HTML5 jQuery实现3D旋转的Google搜索框盒子特效，网页特效分享-Google Images Box - CSS 3D 例子，测试时请确保您的浏览器支持CSS Transforms，否则本效果会异常。鼠标放在搜索区域，盒子即可旋转，旋转的角度根据你的鼠标移动情况自动改变，具有逼真的3D旋转变幻效果。
html 简单 3d盒子 循环体 浪漫设计
weixin_45246071的博客
07-09 378
立体盒子 div设计 利用多个div合成 <div class="zft"> <div class="zft1"> </div> <div class="zft2"> </div> <div class="zft3"> </div> <div class="zft4"> </div> <div clas
html5 3d 盒子(初级)
qq_39237554的博客
05-05 1633
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; #threeDiv{transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg); width:100px;height:100px;position:relative;margin:auto;top:16...
html背景音乐盒子,CSS 3D盒子
weixin_42350101的博客
06-04 405
csshtml,body {position: relative;width: 100%;height: 100%;}.container,#box {width: 200px;height: 200px;}.container {position: relative;-webkit-perspective: 10000px;perspective: 10000px;top: 50%;left: ...
html3d盒子,CSS3 3D盒子旋转效果
weixin_36444911的博客
06-19 331
body{border:1px solid transparent;perspective:500px;height:600px;}#wrap{width:600px;height:600px;margin:100px auto;box-shadow:0 0 3px inset;}#box{width:200px;height:200px;position:relative;top:0;left:...
用Three.js在html文件中写一个完整的3D盒子编程
qq_37759901的博客
12-20 713
【代码】用Tree.js在html文件中写一个完整的3D盒子编程。
css33D盒子动画（盒子套盒子）
ssh6666的博客
03-15 892
css3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 关键帧的定义 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 @keyframes mymove{ from{初始状态属性...
html惊喜盒子效果,网页设计之css炫酷3d盒子效果
weixin_32807673的博客
06-10 881
EasyDemo*CSS概述及样式表知识点个人总结(一&&二)一、CSSCSS概述1.1.1CSS的作用1.1.2什么是CSS*CSS:层叠样式表，简称样式表*用于html文档中元素的样式定义-实现了将内容与表现分离-提高代码的可重用性和可维护性1.2使用CSS样式表1.2.1使用CSS样式表*内联方式-样式定义在单个的html元素中*内部样式表-样...vue-cli build...
3D立方体盒子
leechoy
07-19 414
效果图： 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } body { padding: 200px 300px; } ul { position: relativ
炫酷3D旋转魔方动画：创意表白神器
从压缩包子文件的文件名称列表中，我们可以推测文件可能包含了3D旋转透明盒子的模型或者动画相关的资源文件。这些资源可能包括3D模型文件、纹理图像、动画设置文件等，都是实现3D旋转魔方效果所必需的。 综上所述，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值