##transform(变形)、闹钟实例、3D
2017-01-20 本文已影响0人
overisover
国外测试网站：http://codepen.io/；
transform(变形)
CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性，在CSS3中transform主要包括以下几种：旋转rotate、倾斜skew、缩放scale和移动translate以及矩阵变形matrix
transform-origin的取值可以是top, bottom, left, right, center, 或百分比，或长度值
参数：
rotate(旋转)
可以通过rotate使元素旋转一定的度数
transform:rotate(30deg);
顺时针旋转一定角度， 单位是角度deg（degree）
旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
元素旋转的的基点默认是中心(坐标轴原点)，可以通过transform-origin属性改变
transform:rotate(30deg);
transform-origin: 0% 0%;
transform-origin的取值可以是top, bottom, left, right, center, 或百分比，或长度值
transform-origin属性对下面介绍的transform都有作用
translate(位移)
可以通过translate使元素平移
transform:translate(x,y);
例子
transform:translate(200px,150px);
也可以简单只移动一个坐标
transform:translateX(100px);
transform:translateY(100px);
scale(缩放)
可以通过scale使元素缩放一定的比例，和translate类似，也有三个方法
scale(x,y) /*使元素水平方向和垂直方向同时缩放*/
scaleX(x) /*元素仅水平方向缩放*/
scaleY(y) /*元素仅垂直方向缩放*/
transform:scale(2, 0.5);
transform:scaleY(0.3);
transform:scaleY(2);
transform:scale(3);
skew(倾斜)
可以通过skew使元素扭曲一定的度数，和上面一样也有三中类似的用法
transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);
transform应用，时钟完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.clock{
background: #000;
width:200px;
height: 200px;
margin:0 auto;
border-radius: 50%;
position: relative;
}
.circle{
position: absolute;
width:20px;
height: 20px;
border-radius: 50%;
background: #fff;
left: 50%;
top:50%;
margin-top:-10px;
margin-left: -10px;
z-index: 50;
}
.hour-line{
position: absolute;
width:40px;
height: 10px;
background:red;
left: 50%;
top:50%;
margin-top:-5px;
border-radius: 5px;
transform-origin:0 50%;
z-index: 1;
}
.min-line{
position: absolute;
width:50px;
height: 8px;
background:#454;
left: 50%;
top:50%;
margin-top:4px;
border-radius: 5px;
transform-origin:0 50%;
z-index: 1;
}
.sec-line{
position: absolute;
width:60px;
height: 4px;
background:#8ac;
left: 50%;
top:50%;
margin-top:-2px;
border-radius: 1px;
transform-origin:0 50%;
z-index: 1;
}
.hours div{
position: absolute;
width: 20px;
height: 2px;
background:red;
left: 50%;
top:50%;
margin-top:-1px;
margin-left:-10px;
border-radius: 1px;
}
.mins div{
position: absolute;
width:8px;
height: 2px;
background:red;
left: 50%;
top:50%;
margin-top:-1px;
margin-left:-4px;
border-radius: 1px;
}
</style>
</head>
<body>
<div class="clock">
<!-- 圆心 -->
<div class="circle"></div>
<!-- 指针 -->
<div class="hour-line"></div>
<div class="min-line"></div>
<div class="sec-line"></div>
<!-- 刻度 -->
<div class="hours"></div>
<div class="mins"></div>
</div>
<script>
var hours=document.querySelector('.hours');
var mins=document.querySelector('.mins');
//生成时间刻度
var hourStr='';
for(var i=0;i<12;i++){
hourStr+='<div style="transform: rotate('+(-90+i*30)+'deg) translate(85px);"></div>'
}
hours.innerHTML=hourStr;
var minStr='';
for(var i=0;i<60;i++){
minStr+='<div style="transform: rotate('+(-90+i*6)+'deg) translate(90px);"></div>'
}
mins.innerHTML=minStr;
//获取时间指针
var hourLine=document.querySelector('.hour-line');
var minLine=document.querySelector('.min-line');
var secLine=document.querySelector('.sec-line');
//封装指针旋转角度函数
function drawClock(){
//获取当前时间
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
hourLine.style.transform='rotate('+(-90+hour*30+(min/60)*6)+'deg)';
minLine.style.transform='rotate('+(-90+min*6+(sec/60)*6)+'deg)';
secLine.style.transform='rotate('+(-90+sec*6)+'deg)';
}
drawClock();
//开启定时器
setInterval(function(){
drawClock();
}, 1000);
</script>
</body>
</html>
transform 3D 效果
相关函数
旋转 rotateX() rotatY() rotateZ()
位移 translateZ()
缩放 scaleZ()
perspective
在父级设置睛生perspective:500px;
perspective属性的值决定了3D效果的强烈程度，可以认为是观察者到页面的距离。值越大距离越远，视觉上的3D效果就会相应的减弱。perspective: 2000px; 会产生一个好像我们使用望远镜看远方物体的3D效果，perspective: 100px;会产生一个小昆虫看大象的效果。
perspective-origin //设置消失的位置
在父级设置perspective-origin: 0 0;
定义了消失点的位置,如当你沿着铁路线去看两条铁轨，沿着公路线去看两边排列整齐的树木时，两条平行的铁轨或两排树木连线交与很远很远的某一点，这点在透视图中叫做消失点。
backface-visibility
子元素上设置backface-visibility:hidden;
backface-visibility属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。
在某些情况下，我们不希望元素内容在背面可见，比如实现翻牌效果。
transform-style
在父级设置transform-style: preserve-3d;
transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
如果被扁平化，则子元素不会独立的存在于三维空间。
在元素本身设置旋转的中心点transform-origin: center center 100px;
正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cube{
position: relative;
width:200px;
height: 200px;
margin:200px auto;
perspective:4000px;
transition: all 1s;
transform-style: preserve-3d;/*使里面的div有3D效果*/
transform-origin: center center 100px;
transform: rotateY(30deg);/*旋转*/
transform: skew(30deg);/*倾斜*/
}
.cube:hover{
transform: rotateY(180deg);
}
.cube div{
position: absolute;
width:200px;
height: 200px;
color: #c3c;
font-size: 60px;
text-align: center;
line-height: 200px;
}
.cube div:nth-child(1){
transform-origin:right center;
transform:translateX(-200px) rotateY(90deg);
background:rgba(23,222,10,.6);
}
.cube div:nth-child(2){
transform-origin:left center;
transform:translateX(200px) rotateY(-90deg);
background:rgba(23,11,10,.6);
}
.cube div:nth-child(3){
transform-origin:bottom center;
transform:translateY(-200px) rotateX(-90deg);
background:rgba(23,66,10,.6);
}
.cube div:nth-child(4){
transform-origin:top center;
transform:translateY(200px) rotateX(90deg);
background:rgba(23,123,10,.6);
}
.cube div:nth-child(5){
transform:translateZ(200px);
background:rgba(23,211,10,.6);
}
.cube div:nth-child(6){
background:rgba(23,45,11,.6);
}
</style>
</head>
<body>
<div class="cube">
<div class="side-1">1</div>
<div class="side-2">2</div>
<div class="side-3">3</div>
<div class="side-4">4</div>
<div class="side-5">5</div>
<div class="side-6">6</div>
</div>
</body>
</html>
