CSS3 transform属性3D立方体效果示例
实例教程:
主要是通过一个3D立方体的效果实例来深入了解css3的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效果的认知
我们可以看到这是一个三维的空间图,不要被第一眼的复杂感吓到,仔细分解一下其实还是很清晰的:反正就X轴、Y轴、Z轴三个方向嘛。
想象一下,假如你现在坐在电脑面前,电脑屏幕中心是原点,原点往右就是X轴正方向,往下就是Y轴正方向,往屏幕前方(也就是往人脸)的方向就是Z轴的正方向了。把坐标轴的方向搞清楚了,上面的方法就能正确的使用了。
如果你觉得上面的解释仍然太过于枯燥抽象,那就来举个生活中的例子来对应一下三个rotate属性(rotateX、rotateY、rotateZ)吧:
如下图:体操表演-绕着X轴旋转就是rotateX(单杠就是X轴)
如下图:钢管舞表演-绕着Y轴旋转就是rotateY(钢管就是Y轴)
如下图:转盘旋转-绕着Z轴在旋转就是rotateZ(想象有一根绳子从转盘的中心穿过,图不好找==)
perspective属性
perspective的中文意思是:透视,视角!该属性用来激活一个3D空间。
当为元素定义perspective属性时,其子元素都会获得透视效果(使用了3D变换的元素)。所以一般来说perspective属性都应用在父元素上,我们可以把这个父元素称为舞台元素。
只看解释可能还是难以理解,我们还是用实例说话吧:
从上图可以看出,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%)
transform-origin:top(等价于:top center/center top)
transform-origin:bottom(等价于:bottom center/center bottom)
transform-origin:right(等价于:right center/center right)
transform-origin:left(等价于:left center/center left)
transform-origin:top left(等价于:left top)
同理,还可以设置为:transform-origin:top right(右上角为原点)、transform-origin:bottom right(右下角为原点)、transform-origin:bottom left(左下角为原点)
绘制立方体效果
各位看官等不及了吧,讲了那么多’废话’,本篇文章的重头戏终于来了!
dom结构
//舞台元素,设置perspective,让其子元素获得透视效果。 //容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现//立方体的六个面
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); } }
最后把这个动画用到这个立方体的容器元素上,CSS3 transform属性3D立方体效果示例就到此结束了。
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
- 这篇文章主要介绍了C# 字段和属性的的相关资料,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下...2020-11-03
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来跟着小编一起看...2016-09-14
- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程,各位想知道具体制作步骤的使用者们,那么下面就快阿里跟着小编一起看一...2016-09-14
- js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。...2013-10-19
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考,具体如下:这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧。运行效果截图如下:在线演...2015-10-30
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程,各位想知道到底该怎么调色的,那么下面就快来跟着小编一起看一看...2016-09-14
- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 这篇文章主要为大家介绍了Vue的计算属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-11-16
- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- ps软件是现在很多人比较喜欢的,有着非常不错的使用效果,这次文章就给大家介绍下ps怎么制作图片阴影效果,还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
- 这篇文章主要给大家介绍C# winform快捷键设置技巧,涉及到C winform快捷键相关知识,对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
- ps软件是现在很多人比较喜欢使用的,有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法,还不知道怎么制作的赶紧来看看。 最终效果  1...2017-07-06
c#中Winform实现多线程异步更新UI(进度及状态信息)
本篇文章主要介绍了c#中Winform实现多线程异步更新UI(进度及状态信息) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
C# Dynamic关键字之:调用属性、方法、字段的实现方法
本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23