html5和css3实现3D立方体效果

1. rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

2. rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

3. rotateZ() 旋转
通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>转换模块-正方体</title><style>*{margin: 0;padding: 0;/*去除默认边距*/}ul{width: 200px;height: 200px;border: 1px solid #000;box-sizing: border-box;margin: 100px auto;position: relative;/*修改基本样式*/transform: rotateY(45deg) rotateX(45deg);/*旋转看看效果*/transform-style: preserve-3d;/*将父元素设置为3d空间*/}ul li{list-style: none;width: 200px;height: 200px;font-size: 60px;text-align: center;line-height: 200px;position: absolute;left: 0;top: 0;/*修改基本样式*/}ul li:nth-child(1){background-color: red;transform: translateX(-100px) rotateY(90deg);/*将第一个l向左移动100像素，然后绕y轴旋转90度，形成左边的面*/}ul li:nth-child(2){background-color: green;transform: translateX(100px) rotateY(90deg);/*将第一个2向右移动100像素，然后绕y轴旋转90度*，形成右边的面*/}ul li:nth-child(3){background-color: blue;transform: translateY(-100px) rotateX(90deg);/*将第一个3向上移动100像素，然后绕x轴旋转90度，形成上面的面*/}ul li:nth-child(4){background-color: yellow;transform: translateY(100px) rotateX(90deg);/*将第一个4向下移动100像素，然后绕x轴旋转90度*/}ul li:nth-child(5){background-color: purple;transform: translateZ(-100px);/*将第一个5向后移动100像素，形成后面的面*/}ul li:nth-child(6){background-color: pink;transform: translateZ(100px);/*将第一个l向前移动100像素，形成前面的面*/}</style>
</head>
<body>
<ul><!--首先做好html布局，正方体有6个面，所以写了6个li--><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
</body>
</html>

效果图：

html5和css3实现3D立方体效果相关推荐

html5把六张图片做成立方体,一篇文章教会你利用html5和css3实现3D立方体效果图...
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
html5制作3d效果图,一篇文章教会你利用html5和css3实现3D立方体效果图
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试用户名密码 css源码: /* entire container, keeps perspective */ .flip-c ...
玩转CSS3的3D动画效果
效果展示基础知识 transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...

html5和css3实现3D立方体效果

html5和css3实现3D立方体效果相关推荐

最新文章

热门文章