css3 视距-perspective

视距-用来设置用户与元素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空间变化

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

实例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空间变化

实例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;背面不可见

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

感谢-空智

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

CSS3景深-perspective
3D视图正方体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
css3 tranform perspective属性
perspective 属性用于规定观察点距离元素的距离, 1 观察点距离元素越近,元素变形就越大,灭点距离越近. 2 观察点距离元素越远,元素变形越小,灭点距离也就越远. 比如设置perspecti ...
如何理解 css3 的 perspective 属性
一.写在前面的话最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...
css中的视距perspective和视差效果
概述之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...
css3 利用perspective实现翻页效果和正方体以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
css3中perspective
perspective 属性定义 3D 元素距视图的距离,以像素计.该属性允许改变 3D 元素查看 3D 元素的视图.当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本 ...
CSS3： perspective 3D属性
本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...
css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
Transform-style和Perspective属性
transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...

随机推荐

转发 XHTML 和 DOCTYPE 切换(MSDN)
使用 Web 标准生成 ASP.NET 2.0 Web 站点 XHTML 和 DOCTYPE 切换为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式.Internet Explorer.Mo ...
hadoop3.0 alpha1 安装配置
1. 官网下载 wget http://apache.fayea.com/hadoop/common/hadoop-3.0.0-alpha1/hadoop-3.0.0-alpha1.tar.gz 2 ...
swift-分支语句
// switch的基本用法 // 1>switch后面的()可以省略 // 2>case中语句结束后不需要跟break // 3>在case中定义局部变量不需要跟{} // 4&g ...
Debian/Ubuntu/CentOS VPS安装Net-Speeder并优化
安装过程: CentOS安装 wget --no-check-certificate https://gist.github.com/LazyZhu/dc3f2f84c336a08fd6a5/raw/ ...
Understanding the Internal Message Buffers of Storm
Understanding the Internal Message Buffers of Storm Jun 21st, 2013 Table of Contents Internal messag ...
Windows平台下Git服务器搭建
第一步:下载Java,下载地址:http://www.java.com/zh_CN/ 第二步:安装Java.安装步骤不再详述. 第三步:配置Java环境变量. 右键”计算机” => ”属性” = ...
关于css样式2
css文本 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本把 Web 页面上的段落的第一行缩进,这是一种最常用 ...
js报错：email() is not a function
email() is not a function 明明是一个函数,但火狐控制台真J.. 由于JSP文件是别人写好直接使用的,所以,来回测试,折腾!最后,没办法,一段一段代码删除测试,才发现.有for ...
jquery点击获取子元素ID值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HttpRequestUtil
package com.didichuxing.tempdirreader; import com.alibaba.fastjson.JSONObject; import java.io.Unsupp ...

css3 视距-perspective

鼠标放到图片上面来查看效果哦！(图片反转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平面距离越远，视觉效果就越小

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

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

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

backface-visibility:hidden;背面不可见

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

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

随机推荐

热门专题