2D
过渡
过渡,2D转换
transition 过渡
之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。
css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。
transition-property:指定过渡的属性。
all为指定所有属性都有过渡效果。 必须要有
transition-duration: 过渡的时间
单位可以是s或者ms。 必须要有
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:
- ease 慢慢减速
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
这是个复合属性
transition:all 3s linear 1s;
过渡属性 ,完成时间 ,运动曲线 ,延迟时间。
示例
初始的样子
变换后的样子
2D转换-缩放
transform 属性。
缩放:
放大缩小。
格式
transform:scale(x,y);
x:代表水平方向的缩放倍数
y:代表垂直方向的缩放倍数。
如果只写一个值,代表等比例缩放。
不会改变真实宽高,也不会旁边的盒子造成影响
示例
正常属性值
缩放后。
转换位移。
位移 translate
格式:
tramsform:translate(水平位移,垂直位移)
属性值:
px 正值:向右或向下。
百分比 是按照盒子本身的宽高。
只写一个值时,是水平位移。
示例
旋转
旋转:rotate
格式: transform:rotate(角度)
单位:deg
transform-origin: 变换原点
格式: transform-origin: 水平坐标 垂直坐标
px
百分比 按照盒子的宽高。50%=center
单词 left center等
transform 后面可以书写多个转换,但是书写顺序不同,效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移,再旋转
第二种会先旋转,再位移。
旋转的默认值中心
示例
原始位置
旋转90度后
倾斜
skew 倾斜属性
格式:transform:skew(水平倾斜角度,垂直倾斜角度)
单位是deg,正值 顺时针,负值逆时针。
示例
3D
3D转换-旋转
3D旋转:
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,
deg表示旋转的角度。
也可以拆分来写
transform: rotateX(deg)X轴旋转
transform: rotateY(deg)Y轴旋转
transform: rotateZ(deg) Z轴旋转
旋转的方向:左手法则
左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
视觉上看是3D效果需要给父级添加perspective: 200px; 大小z轴的高度
设置给变换盒子的父容器。
透视:
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现,不是真正的距离。
perspective:;
开始样式
X轴旋转可以看出有3D的效果了
3D位移
位移:
transform: translateX(); //沿着x轴移动
transform: translateY();//沿着Y轴移动
transform: translateZ();//沿着Z轴移动
transform: translate3d(x,y,z);
translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。
translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。
translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。
同时向右下移动
反面隐藏
可用于旋转到背面不想显示出来可以设置旋转隐藏。
backface-visibility: hidden;
3D呈现
某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style:persevere-3d 来使其变成一个真正的3d图形。
transform-style:persevere-3d
立方体相册
这里给大家分享一个立方体相册的代码
这是鼠标悬停实现的效果可以旋转放大
代码块
<body>
<div class="box">
<div class="maxbox">
<div class="hulu2"></div>
<div class<