css3动画效果图(CSS3 三维变形实现立体方块特效源码)
类别:Web前端 浏览量:523
时间:2022-01-22 01:18:18 css3动画效果图
CSS3 三维变形实现立体方块特效源码前言
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X轴正向是朝右,Y周正向是朝下,Z轴正向是朝屏幕外。
静态效果图如下:
实例代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>CSS3三维变形</title> <!-- --> <style type="text/css"> * { margin: 0; padding: 0; } .box { position:relative; top: 100px; width:300px; height: 300px; margin: 0 auto; background-color: #ccc; /* 透视效果 越大透视距离越平面,反之亦然 */ perspective:800px; } .content { /*3d视图*/ transform-style: preserve-3d; /*过度动画*/ transition: all 3s linear; width:200px; height: 200px; position: absolute; top: 50px; left: 50px; } /* 经过顺时针旋转 */ .content:hover { transform: rotateX(180deg) rotateY(180deg); } /* 方块公共样式 */ .side { position: absolute; height: 200px; width: 200px; border: 2px solid #000; background: rgba(0,0,0,0.3); color: #fff; line-height: 200px; font-size: 30px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } /* 前 */ .side1 { transform: translateZ(100px); } /* 后 */ .side2 { transform: rotateX(180deg) translateZ(100px); } /* 左 */ .side3 { transform: rotateY(-90deg) translateZ(100px); } /* 右 */ .side4 { transform: rotateY(90deg) translateZ(100px); } /* 上 */ .side5 { transform: rotateX(90deg) translateZ(100px); } /* 下 */ .side6 { transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <!-- begin --> <li class="box"> <li class="content"> <li class="side side1">1</li> <li class="side side2">2</li> <li class="side side3">3</li> <li class="side side4">4</li> <li class="side side5">5</li> <li class="side side6">6</li> </li> </li> <!-- end --> </body> </html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
热门推荐
- 如何利用python编写日期的程序(Python读取指定日期邮件的实例)
- python socket 库(Pythony运维入门之Socket网络编程详解)
- sqlserver数据库同步复制(SqlServer将数据库中的表复制到另一个数据库)
- mysql8.0如何配超时时间(解决MySQL8.0时区的问题步骤)
- mysql的简单介绍(MySQL Shell的介绍以及安装)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- mysql双主状态不一致(MySQL GTID主备不一致的修复方案)
- mysqltext与varchar区别(MySQL CHAR和VARCHAR该如何选择)
- python numpy数组拼接(Python快速转换numpy数组中Nan和Inf的方法实例说明)
- kubernetes初始化教程(如何在kubernetes中创建Pod)