视距-用来设置用户与元素3d空间Z平面之间的距离。

实例1:

      HTML:

 <div class="perspective">
<h3>鼠标放到图片上面来查看效果哦!(图片反转360度)</h3>
<div class="container">
<div class="inner">
<div class="rotate">
<img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
</div>
</div>
</div> <h3>鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),但是不使用perspective属性</h3>
<div class="container">
<div class="inner">
<div class="rotate three-d">
<img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
</div>
</div>
</div> <h3>鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为100px,值越小,用户与3D空间z平面距离越近</h3>
<div class="container">
<div class="inner">
<div class="rotate three-d rotate2">
<img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
</div>
</div>
</div> <h3>鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为200px,值越大,用户与3D空间z平面距离越远,视觉效果就越小</h3>
<div class="container">
<div class="inner">
<div class="rotate three-d rotate3">
<img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
</div>
</div>
</div> <h3>鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为400px,值越大,用户与3D空间z平面距离越远,视觉效果就越小</h3>
<div class="container">
<div class="inner">
<div class="rotate three-d rotate4">
<img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
</div>
</div>
</div>
</div>

CSS:

 .perspective .container {
width:500px;
height:300px;
margin:10px auto;
position:relative;
}
.perspective .inner {
width:142px;
height:200px;
position:absolute;
}
@keyframes inner2{
0%{
transform:rotateY(0deg)
}
100%{
transform:rotateY(360deg)
}
}
.perspective .inner:hover{
animation:inner2 5s linear infinite;
} .perspective .rotate {
background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
border: 5px solid hsla(50,50%,50%,.9);
transform: rotateY(45deg);
}
.perspective .rotate img{
border: 1px solid green;
transform: rotateX(15deg) translateZ(10px);
transform-origin: 0 0 40px;
}
.perspective .three-d {
transform-style: preserve-3d;
}
.perspective .rotate2 {
transform: perspective(150px) rotateY(45deg);
}
.perspective .rotate3 {
transform: perspective(200px) rotateY(45deg);
}
.perspective .rotate4 {
transform: perspective(400px) rotateY(45deg);
}

演示demo:

鼠标放到图片上面来查看效果哦!(图片反转360度)

鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),但是不使用perspective属性

鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为100px,值越小,用户与3D空间z平面距离越近

鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为200px,值越大,用户与3D空间z平面距离越远,视觉效果就越小

鼠标放到图片上面来查看效果哦!(图片反转360度--使用transform-style: preserve-3d;效果),使用perspective属性且值为400px,值越大,用户与3D空间z平面距离越远,视觉效果就越小

点击编辑在线源代码-查看效果

实例2:

HTML:

     <div class="perspective-nd">
<h3>perspective值为1000px的效果如下:perspective: 1000px;该值越大,角度出现的越远,相当低的强度和非常小的3D空间变化</h3>
<div class = "container">
<div class="inner">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side right">3</div>
<div class="side left">4</div>
<div class="side top">5</div>
<div class="side bottom">6</div>
</div>
</div>
<h3>perspective值为200px的效果如下:此值越小,角度出现的越近,从而创建一个高强度的角度和一个大型3D变化。</h3>
<div class = "container">
<div class="inner inner2">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side right">3</div>
<div class="side left">4</div>
<div class="side top">5</div>
<div class="side bottom">6</div>
</div>
</div>
</div>

CSS:

     .perspective-nd .container {
width:500px;
height:300px;
margin:10px auto;
position:relative;
}
.perspective-nd .inner {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(32deg);
perspective: 1000px;
}
.perspective-nd .side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 2em;
}
.perspective-nd .front {
transform: translateZ(1em);
}
.perspective-nd .top {
transform: rotateX(90deg) translateZ(1em);
}
.perspective-nd .right {
transform: rotateY(90deg) translateZ(1em);
}
.perspective-nd .left {
transform: rotateY(-90deg) translateZ(1em);
}
.perspective-nd .bottom {
transform: rotateX(-90deg) translateZ(1em);
} .perspective-nd .back {
transform: rotateY(-180deg) translateZ(1em);
}
.perspective-nd .inner2 {
perspective: 200px;
}

perspective值为1000px的效果如下:perspective: 1000px;该值越大,角度出现的越远,相当低的强度和非常小的3D空间变化

1
2
3
4
5
6

perspective值为200px的效果如下:此值越小,角度出现的越近,从而创建一个高强度的角度和一个大型3D变化。

1
2
3
4
5
6

实例3:

HTML:

 <div class="perspective-origin">
<h3>perspective值为1000px的效果如下:perspective: 1000px;该值越大,角度出现的越远,相当低的强度和非常小的3D空间变化</h3>
<div class = "container">
<div class="inner">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side right">3</div>
<div class="side left">4</div>
<div class="side top">5</div>
<div class="side bottom">6</div>
</div>
</div>
</div>

CSS:

 .perspective-origin .container {
width:500px;
height:300px;
margin:10px auto;
position:relative;
}
.perspective-origin .inner {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(32deg);
perspective: 1000px;
animation: move-origin infinite 2s;
}
.perspective-origin .side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 2em;
}
.perspective-origin .front {
transform: translateZ(1em);
}
.perspective-origin .top {
transform: rotateX(90deg) translateZ(1em);
}
.perspective-origin .right {
transform: rotateY(90deg) translateZ(1em);
}
.perspective-origin .left {
transform: rotateY(-90deg) translateZ(1em);
}
.perspective-origin .bottom {
transform: rotateX(-90deg) translateZ(1em);
} .perspective-origin .back {
transform: rotateY(-180deg) translateZ(1em);
}
@keyframes move-origin {
0% {
perspective-origin: 0% 0%;
}
25% {
perspective-origin: 100% 0%;
}
50% {
perspective-origin: 100% 100%;
}
75% {
perspective-origin: 0% 100%;
}
100% {
perspective-origin: 0% 0%;
}
}

演示demo:

perspective值为1000px的效果如下:perspective: 1000px;该值越大,角度出现的越远,相当低的强度和非常小的3D空间变化

1
2
3
4
5
6

实例4:

backface-visibility属性决定元素旋转背面是否可见,对于未旋转的元素,该元素是正面面向我们的,但是当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility基本语法如下:
backface-visibility: visible | hidden
visible含义是:为backface-visibility的默认值,表示反面可见
hidden含义是:表示反面不可见。
backface-visibility属性可用于隐藏内容的背面。默认情况下,背面可见,这意味着即使在翻转后,旋转的内容仍然可见。但当backface-visibility设置为hidden时,旋转后内容将隐藏,因为旋转后正面将不再可见。

HTML:

 <div class="backface-visibility">
<h3>backface-visibility:hidden;背面不可见</h3>
<div class = "container">
<div class="inner">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side right">3</div>
<div class="side left">4</div>
<div class="side top">5</div>
<div class="side bottom">6</div>
</div>
</div> <h3>背面可见,在2,3,6方块设置backface-visibility:visible;</h3>
<div class = "container">
<div class="inner">
<div class="side front">1</div>
<div class="side back slide2">2</div>
<div class="side right slide2">3</div>
<div class="side left">4</div>
<div class="side top">5</div>
<div class="side bottom slide2">6</div>
</div>
</div>
</div>

CSS:

 .backface-visibility .container {
width:500px;
height:300px;
margin:10px auto;
position:relative;
}
.backface-visibility .inner {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(32deg);
perspective: 1000px;
animation: move-origin33 infinite 2s;
}
.backface-visibility .side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 2em;
backface-visibility:hidden;
}
.backface-visibility .front {
transform: translateZ(1em);
}
.backface-visibility .top {
transform: rotateX(90deg) translateZ(1em);
}
.backface-visibility .right {
transform: rotateY(90deg) translateZ(1em);
}
.backface-visibility .left {
transform: rotateY(-90deg) translateZ(1em);
}
.backface-visibility .bottom {
transform: rotateX(-90deg) translateZ(1em);
} .backface-visibility .back {
transform: rotateY(-180deg) translateZ(1em);
}
@keyframes move-origin33 {
0% {
perspective-origin: 0% 0%;
}
25% {
perspective-origin: 100% 0%;
}
50% {
perspective-origin: 100% 100%;
}
75% {
perspective-origin: 0% 100%;
}
100% {
perspective-origin: 0% 0%;
}
}
.backface-visibility .slide2 {
backface-visibility:visible;
}

演示demo:

backface-visibility:hidden;背面不可见

1
2
3
4
5
6

背面可见,在2,3,6方块设置backface-visibility:visible;

1
2
3
4
5
6

感谢-空智

css3 视距-perspective的更多相关文章

  1. CSS3景深-perspective

    3D视图正方体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. css3 tranform perspective属性

    perspective 属性用于规定观察点距离元素的距离, 1 观察点距离元素越近,元素变形就越大,灭点距离越近. 2 观察点距离元素越远,元素变形越小,灭点距离也就越远. 比如设置perspecti ...

  3. 如何理解 css3 的 perspective 属性

    一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...

  4. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

  5. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  6. css3中perspective

    perspective 属性定义 3D 元素距视图的距离,以像素计.该属性允许改变 3D 元素查看 3D 元素的视图.当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本 ...

  7. CSS3: perspective 3D属性

    本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...

  8. css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  9. Transform-style和Perspective属性

    transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...

随机推荐

  1. sql sever跨数据库复制数据的方法【转】

    1,用Opendatasource系统函数 详细的用法已经注释在sql代码中了.这个是在sqlserver到sqlserver之间的倒数据.2005,2008,2012应该都是适用的. --从远程服务 ...

  2. go语言环境搭建

    1.官网https://golang.org/dl/下载go语言的执行器 2.此处以Windows操作系统上安装go为例,安装go1.7.3.windows-amd64.msi 3.配置go环境变量, ...

  3. V2EX 上收藏Top200

    截止到目前 V2EX 上收藏人数最多的 56 个帖子 收藏数 Top200 截止到目前V2EX上收藏人数最多的56个帖子 说说自己知道的各个领域水平比较不错的论坛 发一个自用了一年多的加密代理工具 s ...

  4. Linux系统程序的运行级别

    Linux系统有7个运行级别: 运行级别 描述 0 系统停机状态,系统默认运行级别不能设为0,否则不能正常启动 1 但用户工作状态,root权限,用于系统维护,禁止远程登录 2 多用户状态(没有NFS ...

  5. 【FPGA】相关介绍

    什么是 FPGA ? FPGA是Field Programmable Gate Array的缩写,即现场可编程门阵列,它是在PAL.GAL.EPLD等可编程器件的基础上进一步发展的产物.它是作为专用集 ...

  6. App Store最新审核标准,中文版

    App store最新审核标准(2015.3)公布 1. 条款和条件 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA).人机交互指南 ...

  7. USACO 2014 JAN 滑雪录像

    2. 滑雪录像{silver题3} [问题描述] 冬奥会的电视时刻表包含N (1 <= N <= 150)个节目,每个节目都有开始和结束时间.农民约翰有两台录像机,请计算他最多可以录制多少 ...

  8. 个人纪录(初)----Ueditor文本编辑器的引用

    源码下载地址:http://ueditor.baidu.com/website/ 打开源码参考.html 把ueditor引入自己的web项目下. 在需要引入文本的地方写个div,设置样式等. 并且在 ...

  9. [vijos P1040] 高精度乘法

    如果这次noip没考好,完全是因为从7月29日之后就没有再写过程序了.说起来,真是一个泪流满面的事实… 那这样一个弱智题练手恢复代码能力,竟然还花了我两个晚上(当然不是两整个晚上…) 第一天TLE了, ...

  10. [NOI 2006] 最大获利 80分

    最后两点怎么搞都要30s+,但是我不会什么优化啊…暂时就这样吧.Dinic的时间复杂度是O(N^2*M) 这题和TDL的幼儿园模板是一样的. 这次写网络流给自己计时了,大约是40min左右,后来都跑去 ...