利用HTML+CSS,写出一个正方体并实现透视效果

HTML+CSS,写出一个正方体并实现透视效果

- 首先写一个正方体我们需要了解CSS中的2D和3D属性。
具体代码如下：
- HTML部分
- CSS部分

首先写一个正方体我们需要了解CSS中的2D和3D属性。

W3C教程

transform-style: preserve-3d;：这个属性必不可少
translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 X轴坐标和Y 轴坐标位置参数。
rotateX()：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY()：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
rotateZ()：通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转

了解知道以上属性后就可以进行编写。

具体代码如下：

HTML部分

<body><div class="box"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div></div>
</body>

CSS部分

 <style type="text/css">*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;transform: translate(-50%,-50%) rotateX(45deg) rotateY(45deg);transform-style: preserve-3d;}.box div{width: 200px;height: 200px;border: black 1px solid;position: absolute;// 给盒子进行定位，将全部盒子合并在一起left: 400px;top: 250px;opacity: 0.5;// 给所有盒子设置一个透视属性}.one{background: red;transform: translate(-50%,-50%);transform: translateZ(100px);}.two{background: yellow;transform: translate(-50%,-50%);transform: translateZ(-100px);}.three{background: green;transform: translate(-50%,0) translateX(200px) rotateY(90deg);}.four{background: blue;transform: translate(-50%,0) translateX(0px) rotateY(90deg);}.five{transform: translate(-50%,-50%) translateX(100px) rotateX(90deg);background: blueviolet;}.six{transform: translate(0%,-50%) translateY(200px) rotateX(90deg);background: brown;}</style>

利用HTML+CSS,写出一个正方体并实现透视效果相关推荐

用js写出数据结构中的自定义队列，利用队列思想写出一个击鼓传花的游戏函数，优先级队列
队列的核心是先进先出 1.用js写出数据结构中的自定义队列 class Queue{constructor(){this.item = [];}// 1.入队enqueue(ele){this.ite ...
如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)
如何用html写一个电商网页主页前言目前我还在学习这个初阶段,如果有错误的地方或者没有做好的地方,还请诸位大佬指正,我会虚心学习,多谢了正文里面的东西后面我会详细讲解内容 ps 这里是htm ...
用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计标签:css 1297 发表评论半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
用css写出的水滴形状
使用css写出水滴效果要用到css的阴影和动画效果 1.那就开始第一步首先要一个div盒子放小水滴 <div class="box"></div> 然后在 ...
输入一个数字n 如果n为偶数则除以2，若为奇数则加1或者减1，直到n为1，求最少次数写出一个函数
输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数写出一个函数题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数写 ...
怎样写出一个较好的高速排序程序
写出一个较好的高速排序程序高速排序是经常使用的排序算法之中的一个,但要想写出一个又快又准的使用程序,就不是那么简单了须要注意的事项首先要写正确.通常使用递归实现.其递归相当于二叉树展开,因此假设 ...

利用HTML+CSS,写出一个正方体并实现透视效果

HTML+CSS,写出一个正方体并实现透视效果

首先写一个正方体我们需要了解CSS中的2D和3D属性。

具体代码如下：

HTML部分

CSS部分

利用HTML+CSS,写出一个正方体并实现透视效果相关推荐

最新文章

热门文章