CSS3 3D立体旋转
用到的知识点
- 最重要的一个属性
transform-style:flat|preserve-3d;
该属性默认值为 flat。- 当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时,容器的子元素便会相对父元素所在平面进行3D变换。
- 位移操作: translateX(length) 、translateY(length) 、 translateZ(length),length可正可负,同时位移操作可简写为translate(Xlength,Ylength,Zlength);
- 旋转操作:rotateX(angle) 、rotateY(angle) 、rotateZ(angle) ,angle同样可正可负,可简写为rotate(Xangle,Yangle,Zangle);
- 透明度:可通过transparent或opacity属性设置。
操作步骤
- 准备用一个父盒子包裹六个子盒子,如图
- 让子盒子绝对定位,此时我们肉眼可见的只有一个
- 为父盒子设置如下属性,得到如图变换
transform-style:preserve-3d;transform: rotateX(-33.5deg) rotateY(45deg);
对子元素进行位移以及旋转变换得到正方体,为了清晰我们为子元素添加了透明度
设置border- radios它还可以变成这样(hhhh)
接下来便要编写animation动画。此步骤请自行学习 W3C CSS动画
源代码
[github]源代码(https://github.com/zyg1999/Web/blob/master/3 d rotation.html)
CSS3 3D立体旋转相关推荐
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有"懒人原生"字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效 ...
- C3+H5小案例 | 03 3D立体旋转相册
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
- 从零开始打造一个Android 3D立体旋转容器
本文地址,转载请注明 http://blog.csdn.net/mr_immortalz/article/details/51918560 github 代码下载地址 :https://github ...
- js制作3d立体旋转相册
使用js做一个3d立体旋转相册 可自由拖拽 源码如下 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- CSS3实现立体旋转动画效果
问题描述 一个3D立体图形在网页中呈现旋转效果,看起来十分炫酷,这个过程的实现其实并不困难,只需要利用CSS3动画效果,并对属性设置合适的参数之后,效果就能实现了. 在解决问题之前,需要先了解CSS3 ...
- css3 3D立体相册实现
这几天无聊,看到有博主弄的电子相册有点意思,就照葫芦画瓢也实现了一个,一个半透明的正方体包含着一个小正方体,相册自动旋转,当获得焦点时变化效果,截图如下: 一,代码目录结构 二,html代码 < ...
- Ios精品源码,tableview下载视频直播源播放器图片位置3D立体旋转相册屏风动画
1.tableview的展开收起以及cell的选中未选中源码 2.ios后台下载视频 3.直播源播放器-电视台,乐视直播,熊猫直播,电视剧轮播,电影等 4.自定义文本图片位置源码 持续更新 求star ...
- qt opengl lesson5 绘制3d立体旋转图形
继续上一篇lesson,先将3d立体各个面写完,然后进行旋转,感觉每个面单独写比较费时,这大概是3d比较麻烦和难以理解的地方,需要建立良好的空间想象力. #---------------------- ...
- Ios精品源码,tableview下载视频直播源播放器图片位置3D立体旋转相册屏风动画...
2019独角兽企业重金招聘Python工程师标准>>> 1.tableview的展开收起以及cell的选中未选中源码 2.ios后台下载视频 3.直播源播放器-电视台,乐视直播,熊猫 ...
最新文章
- 过节的快乐,在于Free | 手把手带你学Django
- Web 2.0技术对SEO的影响
- Oracle触发器和new、old特殊变量
- Typora开始收费,介绍几款免费的MarkDown编辑器
- RESTful Web 服务 - 消息
- Spring mvc ContextLoaderListener 原理解析
- 职高中专的模块化课程设计难点
- java面试题十一 基本数据类型
- [前台]---关于input标签的value值
- 20162312 2016-2017-2《Java程序设计》课程总结
- java 反射技术实例,什么是反射技术?Java中最常用的反射技术实例
- 虚拟ONVIF 摄像机
- [ACNOI2021]OEIS yyds
- STM32串口驱动安装攻略
- Spring Security整合KeyCloak保护Rest API
- 广东工业大学研究生新生攻略
- 北邮计算机通信网第一阶段作业,北邮计算机通信网阶段作业.doc
- OpenCV-Python 级联分类器训练 | 六十三
- leetcode 2188 归约后线性dp
- (转)KVAudioStreamer - 基于AudioToolBox的开源音频流媒体播放器