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>
html5——3D转换的更多相关文章
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
- CSS 3 3D转换
绘制3D环境 父元素设置了 preserve-3d 子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果 值越小 透视效果 ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- css3学习总结8--CSS3 3D转换
3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...
- CSS笔记(十二)CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
随机推荐
- 深刻理解Python中的元类(metaclass)--代码实践
根据http://blog.jobbole.com/21351/所作的代码实践. 这篇讲得不错,但以我现在的水平,用到的机会是很少的啦... #coding=utf-8 class ObjectCre ...
- 1. MaxCounters 计数器 Calculate the values of counters after applying all alternating operations: increase counter by 1; set value of all counters to current maximum.
package com.code; import java.util.Arrays; public class Test04_4 { public static int[] solution(int ...
- Cocos2d-x教程(34)-三维物体OBB碰撞检測算法
欢迎增加Cocos2d-x 交流群:193411763 个中心点.1个旋转矩阵和3个1/2边长(注:一个旋转矩阵包括了三个旋转轴,若是二维的OBB包围盒则是一个中心点,两个旋转轴,两个1/2边长). ...
- 怎样用EA设计ER图
我们开发系统从文档開始,而EA就是替我们开发文档的好工具.结束了我们从概念设计到逻辑设计中的非常多问题.完好我们的文档. 如今就给大家说说如何在EA中设计概念模型ER图: 首先打开EA-"新 ...
- Ajax异步方式实现登录与參数的校验
登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"> <h4>登录</h4> <F ...
- "未能载入文件或程序集“XXX”或它的某一个依赖项。系统找不到指定的文件"的解决方式
今天在写反射调用的时候失败了,经过调试和分析,终于攻克了,以下我就详细说明. 一,报错的现象 未能载入文件或程序集"DalSQL"或它的某一个依赖项.系统找不到指定的文件. 说明: ...
- highcharts注意事项
var json = [ {"id":"1","tagName":"apple"}, {"id":& ...
- mst
https://www.zybuluo.com/ysner/note/1245941 题面 给一个\(n\)点完全图,点权均小于\(2^m\).定义边权等于两端点点权的与和(即\(a_i\&b ...
- 特征变化--->特征向量中部分特征到类别索引的转换(VectorIndexer)
VectorIndexer: 倘若所有特征都已经被组织在一个向量中,又想对其中某些单个分量进行处理时,Spark ML提供了VectorIndexer类来解决向量数据集中的类别性特征转换. 通过为其提 ...
- 常见的几种异常类型Exception
转自:https://blog.csdn.net/niceworkgogogo/article/details/71746208 算数异常类:ArithmeticExecption 空指针异常类型:N ...