CSS3 3D旋转立方体

最新推荐文章于 2024-03-12 07:08:45 发布
最新推荐文章于 2024-03-12 07:08:45 发布
阅读量170 收藏 1
点赞数
原文链接：http://www.cnblogs.com/xutongbao/p/9924954.html
版权 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>CSS3 3D旋转立方体</title>
    <style>
        body{
            margin:0;
            padding:0;
        }

        .cube{
            width: 800px;
            height: 400px;
            /*
                perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变
                3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素
                会获得透视效果，而不是元素本身。
                注释：perspective 属性只影响 3D 转换元素。
            */
            -webkit-perspective: 1000px;
            margin:200px auto 0 auto;
        }

        .ant{
            width: 100%;
            height: 100%;
            /*
                transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
                flat 	        子元素将不保留其 3D 位置。
                preserve-3d 	子元素将保留其 3D 位置。
                注释：该属性必须与 transform 属性一同使用。
            */
            -webkit-transform-style: preserve-3d;
            /*
                translate3d(x,y,z) 	定义 3D 转换。
                rotateY(angle) 	定义沿着 Y 轴的 3D 旋转。
            */
            -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            -webkit-animation:xuanzhuan 5s infinite linear;
        }

        .face{
            width: 100%;
            height: 100%;
            position: absolute;
            border:1px solid;
            -webkit-backface-visibility: visible;
            overflow: hidden;
            z-index: 10;
            text-align: center;
            font-size: 50px;
        }

        .face span {
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        .face-right{
            -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
        }
        .face-left{
            -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
        }
        .face-out{
            -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
        }
        .face-bottom{
            height: 800px;
            -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
        }
        .face-top{
            height: 800px;
            -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
        }

        @-webkit-keyframes xuanzhuan{
            from{
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            }
            to{
                -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="cube">
    <div class="ant">
        <div class="face face-right"><span></span>1</div>
        <div class="face face-left"><span></span>2</div>
        <div class="face face-in"><span></span>3</div>
        <div class="face face-out"><span></span>4</div>
        <div class="face face-bottom"><span></span>5</div>
        <div class="face face-top"><span></span>6</div>
    </div>
</div>
</body>
</html>





转载于:https://www.cnblogs.com/xutongbao/p/9924954.html

weixin_30512089
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3D之旋转立方体
are_gh的博客
01-01 226
CSS3D实现两层立方体旋转嵌套 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { perspective:1000px; background: #000; } .wrap { animation: run 5s linear infinite; transform-style:.
css旋转立方体教程,如何通过CSS3实现旋转立方体
weixin_28691741的博客
08-04 968
主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这...
CSS 3D立方体旋转
Drizzlejj的博客
12-20 268
1.效果如图 2.上码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
css实现3D旋转立方体
kite博客
03-25 189
* 动画 */
css3D旋转立方体
CHC
10-15 4028
3D旋转效果主要使用了CSS3 transform 属性 首先我们先完善布局 要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心 如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系 核心区域只需要一个简单的平面就可以,记得加上transform-style: preserve-3d;子元素将保留其 3D 位置。 &lt;body&gt; &lt;!-- 核心...
CSS3 3d旋转图片立方体案例演示
alenworks的博客
03-04 848
CSS3选择器基础 选择器，在过去我们学过名选择器，类选择器，全局选择器，标签选择器这几种，现在在接触到CSS3以后我将再介绍CSS3属性选择器。 CSS3属性选择器，首先本质上它是选择器，用法和功能和原先的各种选择器并没有什么区别，而它特殊的地方在于它可以根据对象的不同属性来确定它将要选择的对象。在没有学习到这些属性选择器之前，我们对不同属性的对象的选择，一般都采用取不同的类名或者不同的ID命来...
css3立方体旋转效果,jQuery+CSS3实现3D立方体旋转效果
weixin_34395361的博客
08-04 247
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：切换图片过程中，图片进行旋转：HTML结构3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。 Image 1Image 2Image 3Image 4点击上面的按钮切换图片CSS样式为了制作3D透视效果，需要在#css3dimageslider元素上设置perspective 透视属性，并在它里...
纯css实现3D立方体
hhzzcc_的博客
04-04 3586
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body,html{ margin: 0; } body{ display: flex; ...
css3实现3D立方体旋转特效源码
爱酷码的博客
03-12 829
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
纯用CSS来实现3D立方体旋转效果
qq_44958875的博客
07-14 2105
这次用纯CSS来实现3D立方体旋转效果 效果如下（可以想象成一个旋转的立方体） HTML部分 首先 创建一个ul标签 在其ul标签下的6个li标签 相当于正方体的6个面 <body> <ul> <li></li> <li></li> <li></li...
纯CSS3 3D旋转立方体动画
11-24
"纯CSS3 3D旋转立方体动画"正是基于这一特性的应用实例，它展示了如何仅使用CSS3实现一个可以三维旋转的立方体动画。 首先，让我们了解CSS3中的3D转换基础。3D转换提供了在三维空间中改变元素位置、大小和方向的...
纯css3 3D图片立方体旋转动画特效
09-08
本主题聚焦于“纯CSS3 3D图片立方体旋转动画特效”，这是一项利用CSS3的新特性实现的高级技巧，它可以为网页增添生动、动态的视觉体验。 首先，我们来详细探讨CSS3中的3D变换。CSS3的3D变换允许开发者创建出具有...
CSS3 3D立方体旋转展示特效
06-24
对于3D立方体效果，主要涉及到rotateX、rotateY和rotateZ这三个3D旋转函数。通过组合这些旋转，我们可以模拟出一个立方体在不同轴上的转动效果。 接下来，我们讨论GSAP。GSAP是一个强大的JavaScript库，专门用于...
CSS3-3D动画制作旋转立方体
01-20
首先，制作旋转立方体的核心在于理解3D空间中的旋转和平移。立方体由六个正方形div组成，每个div代表立方体的一个面。通过绝对定位，我们可以让这些div在页面上形成一个立方体的形状。接下来，利用CSS3的`rotateX`, ...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
css 3D立方体旋转
05-13
你可以使用CSS 3D转换属性来创建一个旋转的立方体。以下是一个简单的示例代码，你可以根据需要进行修改和扩展： HTML代码： ```html <div class="cube"> <div class="side front">前面</div> <div class="side back">后面</div> <div class="side right">右侧</div> <div class="side left">左侧</div> <div class="side top">顶部</div> <div class="side bottom">底部</div> </div> ``` CSS代码： ```css .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transform: perspective(800px); animation: rotate 5s infinite linear; } .side { position: absolute; width: 200px; height: 200px; background-color: #ccc; border: 1px solid #333; text-align: center; font-size: 24px; line-height: 200px; color: #333; opacity: 0.9; } .front { transform: translateZ(100px); } .back { transform: translateZ(-100px) rotateY(180deg); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } ``` 解释： - `transform-style: preserve-3d;` 定义子元素沿着 3D 空间的形式呈现，使得立方体的各个面可以在 3D 空间中呈现。 - `transform: perspective(800px);` 定义透视距离，使得立方体视角更真实。 - `.front`、`.back`、`.right`、`.left`、`.top` 和 `.bottom` 分别代表立方体的六个面，通过 `transform` 属性设置它们的位置和旋转。 - `@keyframes rotate` 定义一个旋转动画，使得立方体可以不停地旋转。 你可以在浏览器中查看这个示例，看看它是如何工作的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值