使用css3的3D制作一个正方形

首先我们来看效果

首先想要制作 3D的效果最重要的是 css3 中的 transfom-style 属性, 它有2个属性
1. flat : 正常的平铺效果,
2. preserve-3d : 将子元素转化为三维立体元素
接下来通过定位让所有的子元素都重叠在一起,并且通过transform 属性向 Y轴正方向移动正方形一半的距离
因为每个子元素都是立体元素, 最后只要通过rotate(2D旋转) 让每个li标签通过旋转变成正方形的每一个面就ok了

下面是代码, 有空就研究一下吧

<style>div {padding-top: 100px;}ul {width: 200px;height: 200px;padding-top: 100px;list-style: none;margin: 50px auto;padding: 0;position: relative;transform-style: preserve-3d; /*将子元素转为3D*/transition: all 5s linear;transform: rotateX(45deg) rotateY(45deg); /*让ul整体向下转45度,向右转45度*/}li {width: 200px;height: 200px;/* border-radius: 50%; */text-align: center;line-height: 200px;position: absolute; /*让所有的子元素都重叠在一起*/border: 1px solid #ccc;left: 0;right: 0;}li:nth-child(1) {transform: translateZ(100px); /*正面*/background: url('./image/lol1.jpg') 0 0 no-repeat;background-size: cover;}li:nth-child(2) {transform: rotateX(180deg) translateZ(100px);/*背面*/background: url('./image/lol2.jpg') 0 0 no-repeat;background-size: cover;}li:nth-child(3) {transform: rotateY(-90deg) translateZ(100px);/*右面*/background: url('./image/lol3.jpg') 0 0 no-repeat;background-size: cover;}li:nth-child(4) {transform: rotateY(90deg) translateZ(100px);/*左面*/background: url('./image/lol4.jpg') 0 0 no-repeat;background-size: cover;}li:nth-child(5) {transform: rotateX(90deg) translateZ(100px);/*下面*/background: url('./image/lol5.jpg') 0 0 no-repeat;background-size: cover;}li:nth-child(6) {transform: rotateX(-90deg) translateZ(100px); /*上面*/background: url('./image/lol6.jpg') 0 0 no-repeat;background-size: cover;}ul:hover {/*鼠标移动到盒子上就可以让正方体旋转起来了*/transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);background-size: 200px;}</style><div><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>

使用css3的3D制作一个正方形相关推荐

用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
html5 制作商品显示介绍,HTML5+CSS3：3D展示商品信息示例
强化下perspective和transform:translatez的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3d元素,~说不定效果不错哈~ 效果图: 说明一 ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)...
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
教你用CAD制作一个简单的3D外壳
入门CAD ,3D打印,手把手详细教学. 附上一张我画的外壳图: 下面来画一个简单的外壳 1.先画一个正方形(做壳体的内边缘) 工具栏->绘图->矩形. 这里我们指定起始坐标0,0,偏移坐 ...
html制作立体骰子,AI教程：利用illustrator自带的3D功能制作一个逼真的立体骰子...
今天课课家来教大家如何用Illustrator制作一个三维骰子,本教程只分析方法,不进行逐步详细讲解,希望大家用自己理解的方式实现出理想的效果来,具体步骤可分为以下三大步: 首先我们来看看最终效果图: ...

使用css3的3D制作一个正方形

使用css3的3D制作一个正方形

使用css3的3D制作一个正方形相关推荐

最新文章

热门文章