CSS3实现酷炫的3D旋转透视效果


Posted in HTML / CSS onNovember 21, 2019

CSS3实现酷炫的3D旋转透视

3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。

你将学到

  • CSS3 3D 转换的常用API介绍
  • CSS3 3D 应用场景
  • CSS3 3D 实现一个立方体
     

开始

1.CSS3 3D 转换的常用API介绍

首先先上一张css 3D的坐标系:

CSS3实现酷炫的3D旋转透视效果 

接下来我们来介绍几个常用的api:

旋转

  • rotateX()
  • rotateY()
  • rotateZ() 以上几个api分别代表绕x,y,z轴旋转,如下例子为绕x轴旋转的例子:

CSS3实现酷炫的3D旋转透视效果 

相关代码如下:

<style>
.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    /* 规定如何在 3D 空间中呈现被嵌套的元素 */
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: 150px 150px 150px;
}

.rotateX {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: rotateX 6s infinite;
}

@keyframes rotateX {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(360deg);
    } 
}
</style>
<div class="d3-wrap">
    <div class="rotateX"></div>
</div>

 

位移(Transform)

  • translateX(x) 定义 3D 转化,仅使用用于 X 轴的值
  • translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值
  • translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值 以上几个api分别代表相对x,y,z轴的位移,如下例子为向z轴位移的例子:

CSS3实现酷炫的3D旋转透视效果 

这里我们需要注意的是为了能看出位移的效果,我们需要在父容器上加如下属性:

.d3-wrap {
    transform-style: preserve-3d;
    perspective: 500;
    /* 设置元素被查看位置的视图 */
    -webkit-perspective: 500;
}

 

当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 代码如下:

.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    perspective: 500;
    -webkit-perspective: 500;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: center center;
}

.transformZ {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: transformZ 6s infinite;
}

@keyframes transformZ {
    0% {
        transform: translateZ(100px);
    }
    100% {
        transform: translateZ(0);
    } 
}

 

3D缩放

  • scaleX(x) 给定一个 X 轴的3D 缩放转换值
  • scaleY(x) 给定一个 Y 轴的3D 缩放转换值
  • scaleZ(x) 给定一个 Z 轴的3D 缩放转换值 缩放设置和上面的类似,这里就不做过多介绍了。
     

理论上说以上三种常见变换已经够用了,值得关注的是我们要想让元素呈现出3D效果,以下不可忽视的API也很重要:

CSS3实现酷炫的3D旋转透视效果 

2.CSS3 3D 应用场景

css 3D主要应用在网站的交互和模型效果上,比如:

3D轮播图
3D产品介绍
室内3D仿真
h5 3D活动页面,比较典型的就是某年淘宝的年终总结H5
3D数据可视化成图
3D模型图 其实如果css 3D用的熟悉了,一些基本的3D模型完全可以用css画出来。

3.CSS3 3D 实现一个立方体

CSS3实现酷炫的3D旋转透视效果 

核心思路就是用6个面去拼接,通过设置rotate和translate来调整相互之间的位置,如下:

CSS3实现酷炫的3D旋转透视效果 

具体代码如下:

 

.container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    /* 为了让其更有立体效果 */
    transform: rotateX(-30deg) rotateY(45deg);
    transform-origin: 150px 150px 150px;
    animation: rotate 6s infinite;
}
.container .page {
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: #fff;
    background-size: cover;
}
.container .page:first-child {
    background-image: url(./my.jpeg);
    background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
    transform: rotateX(90deg);
    transform-origin: 0 0;
    transition: transform 10s;
    background-color: rgba(179, 15, 64, 0.6);
    background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
    transform: translateZ(300px);
    background-color: rgba(22, 160, 137, 0.7);
    background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
    transform: rotateX(-90deg);
    transform-origin: -300px 300px;
    background-color: rgba(210, 212, 56, 0.2);
    background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    background-color: rgba(201, 23, 23, 0.6);
    background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
    transform: rotateY(-90deg) translateZ(-300px);
    transform-origin: 0 300px;
    background-color: rgba(16, 149, 182, 0.2);
    background-image: url(./my6.jpeg);
}

 

html结构
 

<div class="container">
    <div class="page">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
</div>

总结

以上所述是小编给大家介绍的CSS3实现酷炫的3D旋转透视效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP基础知识介绍
2013/09/17 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php使用正则验证中文
2016/04/06 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
js 幻灯片的实现
2011/12/06 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
npm qs模块使用详解
2020/02/07 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python中 * 的用法详解
2019/07/10 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
SQL Server数据库笔试题和答案
2016/02/04 面试题
红领巾心向党演讲稿
2014/09/10 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
2019初中学生入团申请书
2019/06/27 职场文书