css3立方体实现方式（position+transform）

1.创建立方体所需要的六个面；
html代码

<ul class="cubic"><li>第1个面</li><li>第2个面</li><li>第3个面</li><li>第4个面</li><li>第5个面</li><li>第6个面</li></ul>

css代码

 li{list-style: none;}.cubic{height:100px;width:100px;margin:100px auto;}.cubic li{height:100px;width:100px;text-align:center;line-height:100px;   }.cubic li:nth-child(1){background:lightblue;}.cubic li:nth-child(2){background:lightcoral;}.cubic li:nth-child(3){background:lightgray;}.cubic li:nth-child(4){background:lightseagreen;}.cubic li:nth-child(5){background:lightslategray;}.cubic li:nth-child(6){background:lightgoldenrodyellow;}

效果图：

2.给li添加position：absolute；使六个面位于同一位置，方便后面transform移动；

 .cubic li{height:100px;width:100px;text-align:center;line-height:100px;position:absolute;/*添加positon统一位置*/}

3.利用transform变形属性依次向各个方向左、右、上、下、前、后把六个面展开；

 .cubic li:nth-child(1){background:lightblue;/*不移动，保留在最前边的位置*/}.cubic li:nth-child(2){background:lightcoral;transform:translatex(-100px);/*移到左边位置*/}.cubic li:nth-child(3){background:lightgray;transform:translatex(100px);/*移到右边位置*/}.cubic li:nth-child(4){background:lightseagreen;transform:translatey(-100px);/*移到上边位置*/}.cubic li:nth-child(5){background:lightslategray;transform:translatey(100px);/*移到下边位置*/}.cubic li:nth-child(6){background:lightgoldenrodyellow;transform:translatez(-100px);/*移到后边位置*/}

4.可以给父元素添加以下代码，观察各个面的位置

.cubic{height:100px;width:100px;margin:100px auto;transform-style: preserve-3d;/*添加3d模式*/transition: 6s;/*添加一定时长，方便观察*/}.cubic:hover{transform: rotateY(360deg);/*添加hover选择观察各个面的立体位置*/}

5.利用transform：rotate（）；向相应方向进行旋转，让各个面形成闭合；

 .cubic li:nth-child(1){background:lightblue;/*不移动，保留在最前边的位置*/}.cubic li:nth-child(2){background:lightcoral;transform:translatex(-100px) rotateY(-90deg);/*移到左边位置*/transform-origin: right center;}.cubic li:nth-child(3){background:lightgray;transform:translatex(100px) rotateY(90deg);/*移到右边位置*/transform-origin: left center;}.cubic li:nth-child(4){background:lightseagreen;transform:translatey(-100px) rotatex(90deg);/*移到上边位置*/transform-origin: bottom center;}.cubic li:nth-child(5){background:lightslategray;transform:translatey(100px) rotatex(-90deg);/*移到下边位置*/transform-origin: top center;}.cubic li:nth-child(6){background:lightgoldenrodyellow;transform:translatez(-100px) rotatey(-180deg);/*移到后边位置*/}

给opacity：0.5后的半透明效果图

逆站班！！！

css3立方体实现方式（position+transform）相关推荐

CSS3特效之转化（transform）和过渡（transition）
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理...
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的&quo ...
用css3的@keyframes里设置transform:rotate(); 当控制动画暂停:animation-play-state:paused暂停,在微信和safari里无效...
用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animation-play-state:paused(暂停)|running(运动) ...
CSS3中的变形处理--transform功能（旋转、缩放、倾斜、移动）
1.transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
1 transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...
html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动
1 transform属性在CSS3中,能够利用transform性能实现文字或图像的旋转.缩放.歪斜.挪动这4中类型的变形解决. (1)浏览器反对到目前为止:Safari3.1以上.Chrome ...
html立方体插件,jquery+css3立方体自定义生成（原创）
插件描述:jq+css3矩体自定义生成,可自定义宽高和面的分离量欢迎使用矩体自定义生成插件在使用之前,您需要了解,该插件是基于jquery制作的,您需要引入最新版jquery.js jquery. ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
CSS3中的transition和transform属性
一.前言开门见山的说,transition.transform和translate这三者经常有人搞混,先把这三者做一个简单解释: transform是转换,指的是改变所在元素的外观,它有很多种手段 ...

css3立方体实现方式（position+transform）

css3立方体实现方式（position+transform）相关推荐

最新文章

热门文章