CSS3 3D立方体效果示例-transform也不过如此


Posted in HTML / CSS onDecember 05, 2016

CSS3系列已经学习了一段时间了,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^。

那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈!

CSS3 3D立方体效果示例-transform也不过如此

初识transform

顾名思义:变换。就可以想到它可以做很多很多的事情了,这个属性有很多的值,在这里简单列举一下:

  • translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z):定义位置的移动距离。
  • scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z):定义元素的缩放比例。
  • rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle):定义元素的旋转角度。
  • skew(x-angle,y-angle)、skewX(angle)、skewY(angle):定义元素的倾斜角度。

3D效果的认知

CSS3 3D立方体效果示例-transform也不过如此

我们可以看到这是一个三维的空间图,不要被第一眼的复杂感吓到,仔细分解一下其实还是很清晰的:反正就X轴、Y轴、Z轴三个方向嘛。

想象一下,假如你现在坐在电脑面前,电脑屏幕中心是原点,原点往右就是X轴正方向,往下就是Y轴正方向,往屏幕前方(也就是往人脸)的方向就是Z轴的正方向了。把坐标轴的方向搞清楚了,上面的方法就能正确的使用了。

如果你觉得上面的解释仍然太过于枯燥抽象,那就来举个生活中的例子来对应一下三个rotate属性(rotateX、rotateY、rotateZ)吧:

如下图:体操表演-绕着X轴旋转就是rotateX(单杠就是X轴)

CSS3 3D立方体效果示例-transform也不过如此

如下图:钢管舞表演-绕着Y轴旋转就是rotateY(钢管就是Y轴)

CSS3 3D立方体效果示例-transform也不过如此

如下图:转盘旋转-绕着Z轴在旋转就是rotateZ(想象有一根绳子从转盘的中心穿过,图不好找==)

CSS3 3D立方体效果示例-transform也不过如此

perspective属性

perspective的中文意思是:透视,视角!该属性用来激活一个3D空间。

当为元素定义perspective属性时,其子元素都会获得透视效果(使用了3D变换的元素)。所以一般来说perspective属性都应用在父元素上,我们可以把这个父元素称为舞台元素。

只看解释可能还是难以理解,我们还是用实例说话吧:

CSS3 3D立方体效果示例-transform也不过如此

从上图可以看出,div1是div2的父元素,开始我们给div2元素增加旋转transform:rotateX(50deg)的时候,只感觉div2在平面上被’压缩’了,没有3D的效果,然后当我们给父元素div1增加perspective: 150px;的时候,立马就能看到3D的效果了,感受到他的神奇之处了吧。

另外,perspective的取值也一直是个谜,经过我的多次查阅和测试,得出了一下几个结论:

  • 取值为none或不设置,就没有3D空间。
  • 取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。
  • 貌似当取值为元素的宽度时,视觉效果比较好。

transform-style

transform-style指定嵌套元素如何在3D空间中呈现。

transform-style: flat | preserve-3d

flat是默认值,表示所有子元素在2D平面呈现;preserve-3d表示所有子元素在3D空间中呈现。因此,我们想要实现一些3D效果的时候,transform-style: preserve-3d是少不了的。一般而言,该声明应用在3D变换的兄弟元素们的父元素上,我们可以叫它容器。

transform-origin

transform-origin用来改变元素的原点位置。

它的取值方式有很多种,下面我们通过实例(把背景为黄色的div顺时针旋转45deg)来介绍一下它的常用取值方式:

transform-origin:center(默认值,等价于:center center/ 50% 50%)

CSS3 3D立方体效果示例-transform也不过如此

transform-origin:top(等价于:top center/center top)

CSS3 3D立方体效果示例-transform也不过如此

transform-origin:bottom(等价于:bottom center/center bottom)

CSS3 3D立方体效果示例-transform也不过如此

transform-origin:right(等价于:right center/center right)

CSS3 3D立方体效果示例-transform也不过如此

transform-origin:left(等价于:left center/center left)

CSS3 3D立方体效果示例-transform也不过如此

transform-origin:top left(等价于:left top)

CSS3 3D立方体效果示例-transform也不过如此

同理,还可以设置为:transform-origin:top right(右上角为原点)、transform-origin:bottom right(右下角为原点)、transform-origin:bottom left(左下角为原点)

绘制立方体效果

各位看官等不及了吧,讲了那么多’废话’,本篇文章的重头戏终于来了!

dom结构

<div class="rect-wrap">   //舞台元素,设置perspective,让其子元素获得透视效果。
    <div class="container">    //容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现
        <div class="top slide"></div>   //立方体的六个面
        <div class="bottom slide"></div>
        <div class="left slide"></div>
        <div class="right slide"></div>
        <div class="front slide"></div>
        <div class="back slide"></div>
    </div>
</div>

css代码

对于舞台元素

.rect-wrap {
    position: relative;
    perspective: 1600px;
}

对于容器

.container {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 200px; //设置3d空间的原点在平面中心再向Z轴移动200px的位置
}

立方体的每个面

.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //定位
}

立方体顶面

.top {
    left: 200px;
    top: -200px;
    transform: rotateX(-90deg);
    transform-origin: bottom;
}

立方体底面

.bottom {
    left: 200px;
    bottom: -200px;
    transform: rotateX(90deg);
    transform-origin: top;
}

立方体左面

.left {
    left: -200px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
}

立方体右面

.right {
    left: 600px;
    top: 200px;
    transform: rotateY(-90deg);
    transform-origin: left;
}

立方体前面

.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);  //立方体前面正对着屏幕,所以不用旋转,只需向Z轴前移动距离
}

立方体后面

.back {
    left: 200px;
    top: 200px;
    transform: translateZ(0);   //立方体后面正对着屏幕,所以不用旋转,只需向Z轴后移动距离
}

最后别忘了给每个不同面加上图片,位置什么的再稍微调一下,这个酷炫的立方体就大功告成了。

加动画

最后我们还想要这个立方体自己动起来,我定义了一个动画,看官们可以试试。

@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}

最后把这个动画用到这个立方体的容器元素上,就OK了:

.container{
    animation: rotate-frame 30s linear infinite;
}

需要代码的同学可以点击此处下载:demo

总结

总而言之,在我学习CSS3的过程中,见到了不少的新特性,也学会了如何使用,但是我想说的是我们不管要学会怎么使用,更要去理解每一行代码为什么产生对应的效果,特别是对于3D transform,我们要从根本去理解了3D空间,才能更好的去掌握它的每一个属性值能够带来的效果。

这篇文章内容稍微有点多,自己记录这篇文章的同时又对这个效果学习巩固了一篇,还是蛮开心哒。同时也希望能对各位看官在以后学习3D transform的道路上起到一点点作用!

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 #HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
You might like
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Python如何获取文件路径/目录
2020/09/22 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
领导干部群众路线剖析材料
2014/10/09 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python