css3旋转立方体效果(利用CSS实现立方体360度旋转效果实例代码)
css3旋转立方体效果
利用CSS实现立方体360度旋转效果实例代码静态效果图如下:
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { margin: 0; padding: 0}
ul {list-style: none;}
ul {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transition: all 6s;
/*6秒时间转变*/
transform-style: preserve-3d;
/*放在父盒子内*/
}
ul li {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
/*translateZ是为了让立方体出现形状*/
background-color: rgba(255, 0, 0, 0.6);
}
li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);
background-color: rgba( 0, 255,0, 0.6);
}
li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);
background-color: rgba(0,0,255,0.5);
}
li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);
background-color: rgba(50,50,25,0.5);
}
li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(255,0,255,0.5);
}
li:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(0,255,255,0.5);
}
ul:hover{
transform :rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>第1个盒子</li>
<li>第2个盒子</li>
<li>第3个盒子</li>
<li>第4个盒子</li>
<li>第5个盒子</li>
<li>第6个盒子</li>
</ul>
</body>
</html>
总结
以上就是利用CSS实现立方体效果的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
- python实现螺旋矩阵(Python3实现的旋转矩阵图像算法示例)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- python3d旋转特效(python实现小球弹跳效果)
- python自动识别旋转验证码(Python实现字符型图片验证码识别完整过程详解)
- css制作旋转小球(css实现毛毛虫爬行动作)
- vue加载html5动画(vue实现旋转木马动画)
- css旋转立体效果图(css制作三分圆形效果)
- python动态数组原理(Python实现的旋转数组功能算法示例)
- css3动画360循环旋转(利用纯CSS3实现文字向右循环闪过效果实例可用于移动端)
- css3旋转立方体效果(利用CSS实现立方体360度旋转效果实例代码)
- html5图片动画制作(HTML5 3D旋转相册的实现示例)
- css3伸缩布局教学(css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效)
- css图片水平旋转动画(css实现图片横向排列滚动效果)
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产(CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产)
- js实现图片旋转
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9