登录  /  注册
首页 > web前端 > html教程 > 正文

CSS3之3D变换实例详解

php中文网
发布： 2016-08-29 08:36:53
原创
926人浏览过

css3的3d效果很赞，本文实现简单的两种3d翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^

以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#）

还有w3school上面的这句话早已经过时：

 

目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit，还有其他浏览器的一些小问题）

可以通过Can I use网站查看各浏览器对该CSS3属性的支持情况：

 

听说现在流行先看效果和代码再解释？

（1）效果一

 
 

HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='stage'</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='front'</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='back'</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>        </span></span></span></span></span>
登录后复制
View Code

CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 800px</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;
}<span style="color: #800000;">
.front</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">    
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159262h572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">    
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;        
}<span style="color: #800000;">
.stage:hover .container</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}</span>
登录后复制
View Code

 

（2）效果二

效果链接：  http://codepen.io/FEwen/pen/kXOXpJ

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg"</span> <span style="color: #0000ff;">/&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">&gt;</span>帅气的胡歌<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg"</span> <span style="color: #0000ff;">/&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">&gt;</span>美腻的赵丽颖<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg"</span> <span style="color: #0000ff;">/&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">&gt;</span>清纯的刘亦菲<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>            </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制
View Code

CSS代码：

<span style="color: #800000;">*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 2000px</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;
}<span style="color: #800000;">
.front</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translateZ(50px)</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.front img</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(90deg) translateZ(50px)</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
li:nth-child(1) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> skyblue</span>;
}<span style="color: #800000;">
li:nth-child(2) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;
}<span style="color: #800000;">
li:nth-child(3) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
}<span style="color: #800000;">
.container:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-90deg)</span>;
}
登录后复制
View Code

 

总结：

上面的示例代码中注意几个类名： 类名stage表明舞台元素，类名container表明父容器，还有container里面的变换子元素。

这是标准的嵌套3D变换结构：

　　舞台（perspective,perspective-origin）

　　　　父容器（transform-style: preserve3d）（各种变换）

　　　　　　子元素（各种变换）

　　　　　　子元素（各种变换）

　　　　　　子元素（各种变换）

　　　　　　　...

 

还有无嵌套的3D变换结构：

　　舞台（perspective,perspective-origin）

　　　　子元素（各种变换）

　　　　子元素（各种变换）

　　　　子元素（各种变换）

　　　　　　　...

可以先看上方结构有个直观的认识，下面详细讲解。

 

CSS3变换主要的属性如下：

（1）perspective（参考以上类名stage中的使用）

　　用法：应用于舞台元素，为元素定义perspective属性时，其子元素会获得透视效果。

　　作用：定义3D 元素距视图的距离（视距），单位是像素。可以理解为距物体多远进行观察，因此这个值越小，距离元素物体更近，3D效果越明显；该值越大，距离元素物体越远，3D效果越不明显，因为远远看的只见一坨东西。

　　注意：在实际应用中，可以通过设置多个舞台元素，使子元素的变换相对于各自的舞台实现，那么每一个舞台下的元素变换所产生的视觉效果都是一致的（参考我上面的第二个例子）。

 

（2）perspective-origin（参考以上类名stage中的使用）

　　用法：应用于舞台元素，与perspective配合使用，子元素会获得透视效果

　　作用：可以理解为眼睛所看的位置，默认舞台中心点

　　注意：几种设置方法，如

　　　　perspective-origin: 0px 100px; （使用具体数值）

　　　　perspective-origin: 0% 50%;　 （使用百分比）

　　　　perspective-origin: left center;  （共3种： left/center/right）

 

（3）transform-style: preserve-3d（参考以上类名container中的使用）

　　用法：用于动画子元素的父元素，也就是容器

　　作用：具有两个作用，首先使子元素具有透视效果，其次使子元素保留父元素的3D位置。

　　注意：这个属性究竟有什么用？和perspective有什么干系？

　　　　　——该属性是为了嵌套3D元素而使用的！perspective和transform-style各自使得子元素具有3D透视效果，并且transform-style:preserve-3d使子元素保留父元素的3D位置，简单来说就是嵌套。如果不需要嵌套3D元素，就不需要这个属性。看下面的例子：

　　效果：

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='stage'</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span></span></span></span>
登录后复制
View Code

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 800px</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;
}<span style="color: #800000;">
.stage:hover .container</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}</span>
登录后复制
View Code

 

（4）backface-visibility: hidden（参考以上做3D变换的子元素中的使用）

　　用法：用于动画子元素

　　作用：3D透视下，默认是可以透过背面看到正面的内容（参见第三点的效果），可根据需要设置为不可见。

 

（5）最后一点——变换坐标说明

　　下面盗图一张

　　 

　　坐标系是相对的！相对的！相对的！

　　坐标系会跟着当前元素的变换而变换。

　　例如当前div应用了rotateY(60deg)，那么整个坐标系也会跟着rotateY(60deg)，因此对这个div使用translateZ()始终是和正面垂直的方向。

 

（6）Last but not least，祝开心愉悦每一天，如果发现我有任何错误的地方，请狠狠地告诉我吧！

 

 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：CSS属性之float学习心得 下一篇：HTML 文本格式化实例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
P粉722478067来自于2024-04-18 23:52:34
0 0 36
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 126
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 705
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 434
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 315
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 441
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 266
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 357
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1862
将将类的私有成员设置为构造函数参数 classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
P粉761718546来自于2024-04-06 21:48:47
0 1 262
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部