html5——3D转换
2024-10-01 01:12:23
角度旋转
rotateX:默认以center绕x轴旋转
rotateY:默认以center绕y轴旋转
rotateZ:默认以cente绕z轴r旋转
//rotateX原点为center==》正值(顶部)远离屏幕,负值(顶部)接近屏幕
//rotateX原点为top==》正值(底部)接近屏幕,负值(底部)远离屏幕
//rotateX原点为bottom==》正值(顶部)远离屏幕,负值(顶部)接近屏幕
//rotateY原点为center==》正值(左侧)接近屏幕,负值(左侧)远离屏幕
//rotateY原点为left==》正值(右侧)远离屏幕,负值(右侧)接近屏幕
//rotateY原点为right==》正值(左侧)接近屏幕,负值(左侧)远离屏
距离位移
translateX:以x轴为基准移动,右为正值
translateY:以y轴为基准移动,上为正值
translateZ:以z轴为基准移动,靠近屏幕为正值
旋转中心
transform-origin:top//绕着y轴的顶部进行旋转
transform-origin: x-axis y-axis z-axis;//第三个参数可以不写
x-axis:left、center、right、length、%
y-axis:top、center、bottom、length、%
z-axis:length
透视
1、透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
2、透视是加给父盒子的
3、透视的值表示是2D平面距离屏幕的距离
perspective: 100px;//只有父盒子有此属性
3D呈现
1、只有规定了3d呈现方式为3d才会有显示效果
2、preserve-3d属性是加给父盒子的
transform-style: flat;//所有子元素在 2D 平面呈现
transform-style: preserve-3d;//保留3D空间
背面可见
backface-visibility: hidden;//背部隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: 100px;
float: left;
border: 1px solid #ccc;
perspective: 100px;
} .box > div {
text-align: center;
width: 150px;
height: 150px;
margin: 30px auto;
background-color: blue;
transition: all 1s;
} .box:nth-child(1) div:hover {
transform: rotateX(360deg);
} .box:nth-child(2) div:hover {
transform: rotateY(360deg);
} .box:nth-child(3) div:hover {
transform: rotateZ(360deg);
} .box:nth-child(4) div:hover {
transform: translateX(300px);
} .box:nth-child(5) div:hover {
transform: translateY(300px);
} .box:nth-child(6) div:hover {
transform: translateZ(50px);
}
</style>
</head>
<body>
<div class="box">
<div>rotateX</div>
</div>
<div class="box">
<div>rotateY</div>
</div>
<div class="box">
<div>rotateZ</div>
</div>
<div class="box">
<div>translateX</div>
</div>
<div class="box">
<div>translateY</div>
</div>
<div class="box">
<div>translateZ</div>
</div>
</body>
</html>
最新文章
- 步入angularjs directive(指令)--准备工作熟悉hasOwnProperty
- 整站网页doc下载wget (转)
- Jenkins进阶系列之——09配置Linux系统ssh免密码登陆
- Linux内核抢占与中断返回【转】
- centos6.5_x86_64安装Adobe Flash Player
- c 建立工程 常见错误及心得总结
- oracle知识杂记
- 【solr专题之二】配置文件:solr.xml solrConfig.xml schema.xml
- 设计一个有getMin功能的栈
- JS给元素增加className
- Node.js : 我只需要一个店小二
- 自己开发轻量级ORM(一)
- loadrunner录制脚本(一) ----录制脚本打不开浏览器
- H3C无线路由器安装与设置
- oracle项目案例脚本
- SpringMVC拦截器详解
- linux和普通文本的换行问题
- Goroutines vs Threads
- 汇编,浮点运算符,fldpi,fmul等指令说明.
- Spring 集成 MemCache