html5——3D转换

角度旋转

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>

转载于:https://www.cnblogs.com/wuqiuxue/p/8078916.html

html5——3D转换相关推荐

html5 比例尺,高德地图API之缩放比例尺控件+3D转换
缩放比例尺控件首先引入控件 amap.scale 然后使用 map.addcontrol() 添加控件 map *{margin:0;padding:0;list-style: none;} #co ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
transform（平移、旋转、缩放、3d转换）、渐变、动画笔记
文章目录 HTML5 1. HTML5新增标签 2. 表单属性--交互表单属性 CSS3 1. 选择器 1.1 属性选择器 1.2 结构伪类选择器 1.3 伪元素选择器 2. css属性 2.1 平面 ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
25CSS3中的3D转换
技术交流QQ群:1027579432,欢迎你的加入! 1.现实中的3D有什么特点? 近大远小物体后面遮挡不可见 2.三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的. x轴:水 ...
android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...

html5——3D转换

html5——3D转换相关推荐

最新文章

热门文章