css 3d笔记
来源:互联网 发布:陕钢网络大学 编辑:程序博客网 时间:2024/05/21 19:36
透视
3d变形函数
3d加速
透视:
<div id=“view” style=“width:160px; height:160px; margin:80px auto 0 auto;”>
<div id=“box”>
a
b
c
d
e y-90 z90 z89
f
</div>
</div>
3d变形函数
3d变形使用的是和2d变形类似的transform属性
rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴
translateX translateY translateZ在 XYZ轴上移动
scaleZ(sz) Z轴缩放
matrix3d() 函数则牵扯到线性代数、立体几何、三角学等各种知识
3d加速: 不要乱用
.cube{
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;
#box
{
-webkit-animation-name:animation;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:3s;
margin:80;
-webkit-transform-style:perserve-3d;
-webkit-transform-origin:80px 80px 0;
}
@-webkit-keyframes animation
{
from,to{}
16%{-webkit-transform:rotateY(-90deg);}
33%{-webkit-transform:rotateY(-90deg) rotateZ(135deg);}
50%{-webkit-transform:rotateY(225deg) rotateZ(135deg);}
66%{-webkit-transform:rotateY(135deg) rotateX(135deg);}
83%{-webkit-transform:rotateX(135deg);}
}
3d变形函数
3d加速
透视:
开启3d只针对子元素:
-webkit-transform-style:preserve-3d;
-webkit-perspective:300; /*每一个元素都有一个消失点*/
-webkit-perspective-origin:25% 75%;
<div id=“view” style=“width:160px; height:160px; margin:80px auto 0 auto;”>
<div id=“box”>
a
b
c
d
e y-90 z90 z89
f
</div>
</div>
3d变形函数
3d变形使用的是和2d变形类似的transform属性
rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴
translateX translateY translateZ在 XYZ轴上移动
scaleZ(sz) Z轴缩放
matrix3d() 函数则牵扯到线性代数、立体几何、三角学等各种知识
3d加速: 不要乱用
.cube{
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;
#box
{
-webkit-animation-name:animation;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:3s;
margin:80;
-webkit-transform-style:perserve-3d;
-webkit-transform-origin:80px 80px 0;
}
@-webkit-keyframes animation
{
from,to{}
16%{-webkit-transform:rotateY(-90deg);}
33%{-webkit-transform:rotateY(-90deg) rotateZ(135deg);}
50%{-webkit-transform:rotateY(225deg) rotateZ(135deg);}
66%{-webkit-transform:rotateY(135deg) rotateX(135deg);}
83%{-webkit-transform:rotateX(135deg);}
}
0 0
- css 3d笔记
- CSS 3D House
- CSS 3D
- css 3d样子
- 3D CSS
- 3D与CSS
- CSS 3D变换
- css 3d效果
- css 3d旋转
- <css>3D视图
- css 3d
- CSS 3D
- html css学习笔记-2d 3d动画的转换
- CSS动画-2D、3D转换
- CSS基础-28CSS动画-2D、3D转换
- 3D效果-HTML+CSS
- CSS之3D变换
- CSS perspective 3D rotateXYZ
- errors running builder "Integerate External Tool Builder "
- div + css 层的相对与固定
- Flask(2)-程序的基本结构
- 1TB(或1分钟)排序的冠军
- Spring MVC与Ajax交互实例
- css 3d笔记
- Android Intent.FLAG_NEW_TASK详解,包括其他的标记的一些解释
- web中session与序列化的问题
- 如何新建Outlook电子邮件规则实现邮件自动分类
- 四种方案解决ScrollView嵌套ListView问题
- IntentService
- ubuntu分辨率不能调整的问题
- POJ-1151-Atlantis-求矩形面积并(线段树+扫描线)
- struts2返回json数据 ——不使用json插件