快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡单位≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 perspective-origin

2017-2-12 11:38| 发布者: admin| 查看: 1058| 评论: 0|来自: 蚂蚁部落

建议首先阅读CSS3 perspective一章节, 下面进入正题。

perspective-origin属性设置perspective属性源点的角度。

关于transform变换更多内容可以参阅CSS3 2D/3D转换一章节。

语法结构

[CSS] 纯文本查看 复制代码
perspective-origin: x-axis y-axis;

参数解析:

(1).x-axis:定义视图在x轴上的位置。默认值是50%;可以是left、center、right、length和%形式。

(2).y-axis:定义视图在y轴上的位置。默认值是50%;可以是left、center、right、length和%形式。

可能的参数值形式:left、center、right、length和%。

看了上面的介绍可能还是不够清晰,没有能在大脑中形成一个清晰的概念,那么看下面这张图片:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114305iuz99rtyufrp2nx7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对以上图片做一下简单介绍:

(1).灰色部分就是我们要看的物体。

(2).橘红色部分就是perspective属性设置的查看位置。

(3).红色中心点就是默认的perspective-origin属性值所在位置。

观察物体的时候,并非都是从中心点看过去,可能要换个角度,那么就可以沿着x轴或者y轴更换一个角度。

如果上面说的还不够清楚,再来看下面的图:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114417om5gm259t6t56gvs.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的图片表示默认的观看角度,下面调整一下角度:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114442wx9jqlrq4aa16q9s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的图片向上提高了一下坐标,这样应该比较清晰了。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
#box{ 
  position:relative; 
  height:200px; 
  width:200px; 
  margin-top:150px; 
  margin-left:150px; 
  border:1px solid black; 
  perspective:1000px; 
     
  -webkit-perspective-origin:50px 50px; 
  perspective-origin:50px 50px; 
} 
#inner{ 
  padding:50px; 
  position:absolute; 
  border:1px solid black; 
  background-color:yellow; 
  transform:rotate(45deg); 
  transform-origin:40px 40px; 
  font-size:12px; 
       
  transform:rotateX(45deg); 
} 
table{ 
  font-size:12px; 
  width:300px; 
  margin-left:120px; 
} 
.left{text-align:right} 
</style> 
<script type="text/javascript"> 
function changeRot(value){ 
  var oinner=document.getElementById('inner'); 
  var opersp=document.getElementById('persp'); 
  oinner.style.transform="rotateX(" + value + "deg)"; 
  opersp.innerHTML=value + "deg"; 
} 
     
function changeOrg(){ 
  var ox=document.getElementById('ox'); 
  var oy=document.getElementById('oy'); 
  var obox=document.getElementById('box'); 
  var origin=document.getElementById('origin'); 
       
  var x=ox.value; 
  var y=oy.value; 
       
  obox.style.perspectiveOrigin=x + 'px' + y + 'px'; 
  obox.style.webkitPerspectiveOrigin=x + 'px ' + y + 'px';  
     
  origin.innerHTML=x + "px " + y + "px";             
}
window.onload = function () {
  xuanzhuan.onmousemove = function () {
    changeRot(this.value);
  }
  ox.onmousemove = function () {
    changeOrg();
  }
  oy.onmousemove = function () {
    changeOrg();
  }
}
</script> 
</head>   
<body> 
<div id="box"> 
  <div id="inner">蚂蚁部落</div> 
</div> 
<table> 
  <tr> 
    <td class="left">旋转:</td> 
    <td><input type="range" min="-360" id="xuanzhuan" max="360" value="45"/></td> 
  </tr> 
  <tr> 
    <td class="left">rotateX:</td> 
    <td>(<span id="persp">45deg</span>)</td> 
  </tr> 
  <tr> 
    <td class="left">X轴:</td> 
    <td><input type="range" min="-100" max="200" value="50" id="ox"/></td> 
  </tr> 
  <tr> 
    <td class="left">Y轴:</td> 
    <td><input type="range" min="-100" max="200" value="50" id="oy"/></td> 
  </tr> 
  <tr> 
    <td class="left">origin:</td> 
    <td><span id="origin">50px 50px</span></td> 
  </tr> 
</table> 
</body> 
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-1-18 08:14 , Processed in 0.075332 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部