css3d-魔方

最新推荐文章于 2022-12-10 23:55:41 发布
最新推荐文章于 2022-12-10 23:55:41 发布
阅读量421 收藏 1
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013165804/article/details/71467175
版权

html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <link href="3d.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h2 align="center"> 3d魔方</h2>
    <!-- 视图-->
    <div id="view">
        <div id="box">
            <!-- 盒子容器-->
            <!-- 盒子前面-->
            <div class="div1">
                <table  bgcolor="#8a2be2" >
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!-- 盒子下面-->
            <div class="div2">
                <table bgcolor="#8b008b">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!-- 盒子上面-->
            <div class="div3">
                <table bgcolor="#556b2f" >
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!-- 盒子盒子后面-->
            <div class="div4">
                <table bgcolor="#228b22" >
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!-- 盒子盒子左面-->
            <div class="div5">
                <table bgcolor="#b0c4de" >
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!-- 盒子右面-->
            <div class="div6">
                <table bgcolor="fuchsia" >
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

css

* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
    background: linear-gradient(135deg, #000, #FFF);
}

h2 {
    padding: 50px;
}

table {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table tr {
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}

table td {
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}

#view {
    width: 160px;
    height: 160px;
    margin: 80px auto 0 auto;
}

#box {
    -webkit-animation-name: animation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 80px 80px 0;
    /*-webkit-perspective: 210px; */
    /*-webkit-perspective-origin: -75px -75px; */
}

@-webkit-keyframes animation {
    16% {
        -webkit-transform: rotateY(-90deg);
    }
    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(135deg);
    }
    50% {
        -webkit-transform: rotateY(225deg) rotateZ(135deg);
    }
    66% {
        -webkit-transform: rotateY(135deg) rotateX(135deg);
    }
    83% {
        -webkit-transform: rotateX(135deg);
    }
}

#box > div {
    position: absolute;
    height: 160px;
    width: 160px;
    text-align: center;
    font-size: 40px;
}


/* 兼容性写法如下 */

#box .div1 {
    transform: translateZ(80px);
    -webkit-transform: translateZ(80px);
    /* Safari 和 Chrome */
    -ms-transform: translateZ(80px)/* IE 9 */
    -moz-transform: translateZ(80px)/* Firefox */
    -o-transform: translateZ(80px);
    /* Opera */
}

#box .div2 {
    -webkit-transform: rotateX(-90deg) translateZ(80px);
}

#box .div3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
}

#box .div4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
}

#box .div5 {
    -webkit-transform: rotateY(-90deg) rotateZ(180deg) translateZ(80px);
}

#box .div6 {
    -webkit-transform: rotateY(90deg) translateZ(80px);
}
爱lv行
关注
专栏目录
CSS3D魔法——旋转魔方
m0_67619362的博客
05-05 705
3D旋转：rotate3d(x,y,z,deg) 透视：perspective 3D呈现：transfrom-style 三维坐标系： 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 X轴：水平向右（注意：X往右边是正值，往左边是负值） Y轴：垂直向下（注意：Y往下面是正值，往上面是负值） Z轴：垂直屏幕（注意：往外面是正值，往里面是负值） 我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。 [](()二、魔方图片 ==..
运用css设计简单3D魔方
LiHang1234567777的博客
07-22 285
本文介绍了css简单魔方样式的基础内容。一、对于3D的理解图二、使用步骤*{margin0;padding0;}html{width100%;height100%;}body{width100%;height100%;displayflex;center;center;}section{width150px;height150px;positionrelative;animation}
点点动画～画出懂你的3D魔方
weixin_34348111的博客
10-23 297
作者：首席填坑官∙苏南 来源：@IT·平头哥联盟公众号：honeyBadger8 前言   最近在写《点点动画系列》文章，上一期分享了&lt; 手把手教你如何绘制一辆会跑的车 &gt;，本期给大家带来是结合CSS3画出来的一个立体3d魔方，结合了js让你随心所欲想怎么转，就怎么转，这里是 @IT·平头哥联盟，我是首席填坑官∙苏南(South·Su)，我们先来看看效果，然后再分解它的实现过程吧 做有...
css实现3D魔方效果
linxuanasd的博客
06-21 155
效果展示 index.css index.html
CSS3D--魔方
哈喽234的博客
04-01 687
3D魔方
html5-css3-jQ-运动框架-3D魔方轮播图e-index.html
07-08
3D图像事件
【CSS】使用CSS3---3D转换---实现魔方效果
weixin_44044705的博客
05-24 565
CSS实现魔方效果 实现原理 通过使用CSS3新特性2D转换和3D转换的结合加上CSS过渡的相关应用实现魔方效果 CSS3-----2D转换 translate() 通过 translate() 方法，元素从其当前位置移动，根据给定的 x坐标和y坐标向左向上移动。 transform: translate(50px,100px) ; /* 把元素从左侧移动 50 像素，从顶端移动 100 像素。*/ rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋
CSS3 3D魔方动画代码.zip
07-11
【CSS3 3D魔方动画代码】是一个利用CSS3技术实现的三维魔方动态效果。这个项目展示了CSS3在创建交互式、视觉引人入胜的网页元素方面的强大能力。CSS3是层叠样式表的最新版本，它引入了许多新特性，包括3D转换、动画...
css实现3d魔方效果
09-20
只用css和html实现3d魔方效果，代码简单，效果美观
H5-3d-魔方
qq_41960957的博客
03-18 368
本文使用html css 进行一个3d魔方的设计 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D魔方</title> <style> <!-- 清除页面所有内边距，外边距 --> *{ padding: 0;
纯CSS3制作简单的3D动画魔方
11-14
利用纯CSS3制作简单的3D 动画魔方，不到一百行代码就可以实现！
动态魔方照片3D.css资源文件
11-02
这个css文件专门用来生成动态的页面效果，与我们平常使用魔方一样，有着很好的表现性
html制作3d魔方
03-26
此项目是本人随堂作业，运用html css实现了3d魔方的旋转，有兴趣的可以下载一看！！！
CSS3图片3D旋转相册
01-19
带动感抖动效果CSS3焦点图——这是一款简单的CSS3焦点图，该CSS3焦点图的特点是鼠标滑过焦点图时图片会产生抖动的效果。
html5+css3实现3D相册的功劳
11-15
基于html5+ccs3实现的3D相册功能。此压缩包包含5个相册的demo,是经过集结了删选过最精华的几个案例上传进去。若觉得还不错的话请个给好评
CSS制作3D魔方效果
qq_35515563的博客
03-01 1202
CSS制作3D魔方效果 css源码： body { -webkit-perspective: 500; } .wrap { position: relative; width: 200px; height: 200px; margin: 100px auto; -webkit-transition: all 1s; -webkit-tr
css 3d 魔方模型
yuxiaoc的博客
08-29 159
效果： 有空再把它做成真正可以扭的魔方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d魔方</title> <style> .parent { width: 700px; height: 700px; margin:
CSS 实现一个3d魔方
最新发布
苏苏就是小苏苏的博客
12-10 1229
👏CSS 实现一个3d魔方，速速来Get吧~
CSS3 3D魔方
Get old
03-02 1426
3D魔方             /*上*/         @keyframes spintop {             0% {transform:rotateX(90deg) rotateZ(0deg) translateZ(100px);}             50% { transform:rotateX(1170deg) rotateZ(0deg)  transla
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值