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实现立方体效果的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue加载html5动画(vue实现旋转木马动画)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- python opencv图像合并(Python3+OpenCV2实现图像的几何变换平移、镜像、缩放、旋转、仿射)
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产(CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产)
- css旋转立体效果图(css制作三分圆形效果)
- python实现螺旋矩阵(Python3实现的旋转矩阵图像算法示例)
- css制作旋转小球(css实现毛毛虫爬行动作)
- css3特效旋转菜单(CSS3实现的水平标题菜单)
- css3旋转立方体效果(利用CSS实现立方体360度旋转效果实例代码)
- python自动识别旋转验证码(Python实现字符型图片验证码识别完整过程详解)
- python动态数组原理(Python实现的旋转数组功能算法示例)
- css图片水平旋转动画(css实现图片横向排列滚动效果)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
- 阴生植物为什么不怕照不到阳光(阴生植物为什么不怕照不到阳光)
- 阴生环境 耐阴地被植物,你知道哪些(阴生环境耐阴地被植物)
- 常见的喜阴植物有哪些 养室内盆栽就在这里选(常见的喜阴植物有哪些)
热门推荐
- mysql中常用的三种存储引擎的区别(MySQL 存储过程的优缺点分析)
- 云主机跟云服务器有什么区别(浅析云主机的特点和优势)
- css中好看的渐变颜色代码(CSS Tips:段落每行渐变色文本效果的实现方法)
- 宝塔面板必须安装哪些软件(宝塔面板安装后必要的安全设置说明)
- sqlserver维护计划保存在哪(SQL Server误设置max server memory的处理方法)
- php设计模式如何实现(php模式设计之观察者模式应用实例分析)
- php数据库怎么获得表单(php如何把表单内容提交到数据库)
- docker-compose 开发代码(Docker Compose多容器部署的实现)
- php实例说明(PHP中Static静态关键字功能与用法实例分析)
- laravel跳转后需要授权吗(解决Laravel5.2 Auth认证退出失效的问题)