CSS3 三维变形实现立体方块特效源码


Posted in HTML / CSS onDecember 15, 2016

前言

三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X轴正向是朝右,Y周正向是朝下,Z轴正向是朝屏幕外。

静态效果图如下:

CSS3 三维变形实现立体方块特效源码

实例代码

<!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 -->
     <div class="box">
      <div class="content">
       <div class="side side1">1</div>
             <div class="side side2">2</div>
             <div class="side side3">3</div>
             <div class="side side4">4</div>
             <div class="side side5">5</div>
             <div class="side side6">6</div>
      </div>
     </div>
     <!-- end -->
    </body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
jquery对table做排序操作的实例演示
2017/08/10 jQuery
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python 实现多维数组(array)排序
2020/02/28 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
董事长秘书职责
2014/01/31 职场文书
房屋公证委托书
2014/04/03 职场文书
《白鹅》教学反思
2014/04/13 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript