css3元素如何扭曲、移位或旋转
css3 transform
兼容性：IE10+
transform:rotate(deg)
正数为顺时针，负数为逆时针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
text-align: center;
border:1px solid;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
</head>
<body> <p>transform:rotate</p> </body>
</html>
transform:translateX(x)
transform:translateY(y)
transform:translate(x,y)
第二个值可省略，省略时默认第二个参数为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
}
p{
text-align: center;
border:1px solid; }
div:nth-child(1) p{
-webkit-transform:translateX(10px);
-moz-transform:translateX(10px);
-ms-transform:translateX(10px);
-o-transform:translateX(10px);
transform:translateX(10px);
}
div:nth-child(2) p{
-webkit-transform:translateY(10px);
-moz-transform:translateY(10px);
-ms-transform:translateY(10px);
-o-transform:translateY(10px);
transform:translateY(10px);
}
div:nth-child(3) p{
-webkit-transform:translate(10px, 10px);
-moz-transform:translate(10px, 10px);
-ms-transform:translate(10px, 10px);
-o-transform:translate(10px, 10px);
transform:translate(10px, 10px);
}
div:nth-child(4) p{
-webkit-transform:translate(10px);
-moz-transform:translate(10px);
-ms-transform:translate(10px);
-o-transform:translate(10px);
transform:translate(10px);
}
</style>
</head>
<body>
<div><p>transform:translateX</p></div>
<div><p>transform:translateY</p></div>
<div><p>transform:translate</p></div>
<div><p>transform:translate</p></div>
</body>
</html>
transform:scaleX(x)
transform:scaleY(y)
transform:scale(x,y)
如果只有一个参数，则默认为等比例缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
}
p{
text-align: center;
border:1px solid; }
div:nth-child(1) p{
-webkit-transform:scaleX(.5);
-moz-transform:scaleX(.5);
-ms-transform:scaleX(.5);
-o-transform:scaleX(.5);
transform:scaleX(.5);
}
div:nth-child(2) p{
-webkit-transform:scaleY(.5);
-moz-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
}
div:nth-child(3) p{
-webkit-transform:scale(.5, .3);
-moz-transform:scale(.5, .3);
-ms-transform:scale(.5, .3);
-o-transform:scale(.5, .3);
transform:scale(.5, .3);
}
div:nth-child(4) p{
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
-ms-transform:scale(.5);
-o-transform:scale(.5);
transform:scale(.5);
}
</style>
</head>
<body>
<div><p>transform:scaleX</p></div>
<div><p>transform:scaleY</p></div>
<div><p>transform:scale</p></div>
<div><p>transform:scale</p></div>
</body>
</html>
transform:skewX(xdeg) 正数逆时针，负数顺时针
transform:skewY(ydeg) 正数顺时针，负数逆时针
transform:skew(xdeg, ydeg) 第二个参数可以不填写，默认为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
text-align: center;
border:1px solid;
width:200px;
}
div:nth-child(1){
-webkit-transform:skewX(10deg);
-moz-transform:skewX(10deg);
-ms-transform:skewX(10deg);
-o-transform:skewX(10deg);
transform:skewX(10deg);
}
div:nth-child(2){
-webkit-transform:skewY(10deg);
-moz-transform:skewY(10deg);
-ms-transform:skewY(10deg);
-o-transform:skewY(10deg);
transform:skewY(10deg);
}
div:nth-child(3){
-webkit-transform:skew(10deg, 20deg);
-moz-transform:skew(10deg, 20deg);
-ms-transform:skew(10deg, 20deg);
-o-transform:skew(10deg, 20deg);
transform:skew(10deg, 20deg);
}
div:nth-child(4){
-webkit-transform:skew(10deg);
-moz-transform:skew(10deg);
-ms-transform:skew(10deg);
-o-transform:skew(10deg);
transform:skew(10deg);
}
</style>
</head>
<body>
<div>transform:skewX</div>
<div>transform:skewY</div>
<div>transform:skew></div>
<div>transform:skew</div>
</body>
</html>
3d 转换
tranform:rotateX(x) 沿X轴旋转
transform:rotateY(y) 沿y轴旋转
transform:rotateZ(z) 沿z轴旋转
transform:rotate3d(x,y,z,deg)
rotate3d 旋转角度根据比例计算：
x²+y²+z²=1
计算每个轴所占的比例*deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
text-align: center;
border:1px solid;
width:200px;
}
div:nth-child(1){
-webkit-transform:rotateX(45deg);
-moz-transform:rotateX(45deg);
-ms-transform:rotateX(45deg);
-o-transform:rotateX(45deg);
transform:rotateX(45deg);
}
div:nth-child(2){
-webkit-transform:rotateY(45deg);
-moz-transform:rotateY(45deg);
-ms-transform:rotateY(45deg);
-o-transform:rotateY(45deg);
transform:rotateY(45deg);
}
div:nth-child(3){
-webkit-transform:rotateZ(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotateZ(45deg);
-o-transform:rotateZ(45deg);
transform:rotateZ(45deg);
}
div:nth-child(4){
-webkit-transform:rotate3d(1, 1, 1, 45deg);
-moz-transform:rotate3d(1, 1, 1, 45deg);
-ms-transform:rotate3d(1, 1, 1, 45deg);
-o-transform:rotate3d(1, 1, 1, 45deg);
transform:rotate3d(1, 1, 1, 45deg);
}
</style>
</head>
<body>
<div>transform:rotateX</div>
<div>transform:rotateY</div>
<div>transform:rotateZ</div>
<div>transform:rotate3d</div>
</body>
</html>
计算：如rotate3d(1,2,1,90deg)
则 x²+(2x)²+x²=1
得 x=根号6/6
则 三个轴旋转的角度分别为 根号6/6*1 根号6/6*2 根号6/6*1
transform:translateX 水平，与2d一样
transform:translateY 竖直，与2d一样
transform:translateZ z轴方向，视觉上没有区别，常用于遮罩
transform:translate3d(x,y,z)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
}
p{ text-align: center;
border:1px solid;
width:200px;
}
div:nth-child(1) p{
-webkit-transform:translateX(45px);
-moz-transform:translateX(45px);
-ms-transform:translateX(45px);
-o-transform:translateX(45px);
transform:translateX(45px);
}
div:nth-child(2) p{
-webkit-transform:translateY(45px);
-moz-transform:translateY(45px);
-ms-transform:translateY(45px);
-o-transform:translateY(45px);
transform:translateY(45px);
}
div:nth-child(3) p{
-webkit-transform:translateZ(45px);
-moz-transform:translateZ(45px);
-ms-transform:translateZ(45px);
-o-transform:translateZ(45px);
transform:translateZ(45px);
}
div:nth-child(4) p{
-webkit-transform:translate3d(45px, 45px, 45px);
-moz-transform:translate3d(45px, 45px, 45px);
-ms-transform:translate3d(45px, 45px, 45px);
-o-transform:translate3d(45px, 45px, 45px);
transform:translate3d(45px, 45px, 45px);
}
</style>
</head>
<body>
<div><p>transform:translateX</p></div>
<div><p>transform:translateY</p></div>
<div><p>transform:translateZ</p></div>
<div><p>transform:translate3d</p></div>
</body>
</html>
transform:scaleX 与2d一样
transform:scaleY 与2d一样
transform:scaleZ 视觉上看没有区别
transform:scale3d(x,y,z) 参数不可省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin-bottom:50px;
}
p{ text-align: center;
border:1px solid;
width:200px;
}
div:nth-child(1) p{
-webkit-transform:scaleX(.5);
-moz-transform:scaleX(.5);
-ms-transform:scaleX(.5);
-o-transform:scaleX(.5);
transform:scaleX(.5);
}
div:nth-child(2) p{
-webkit-transform:scaleY(.5);
-moz-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
}
div:nth-child(3) p{
-webkit-transform:scaleZ(.5);
-moz-transform:scaleZ(.5);
-ms-transform:scaleZ(.5);
-o-transform:scaleZ(.5);
transform:scaleZ(.5);
}
div:nth-child(4) p{
-webkit-transform:scale3d(.5, .5, .5);
-moz-transform:scale3d(.5, .5, .5);
-ms-transform:scale3d(.5, .5, .5);
-o-transform:scale3d(.5, .5, .5);
transform:scale3d(.5, .5, .5);
}
</style>
</head>
<body>
<div><p>transform:scaleX</p></div>
<div><p>transform:scaleY</p></div>
<div><p>transform:scaleZ</p></div>
<div><p>transform:scale3d</p></div>
</body>
</html>
transform坐标系统
默认中心为元素的几何中心
更改原点: transform-origin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:#abcdef;
margin:50px auto;
}
p{ text-align: center;
border:1px solid;
width:200px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
div:nth-child(1) p{ }
div:nth-child(2) p{
transform-origin:left top;
}
</style>
</head>
<body>
<div><p>默认</p></div>
<div><p>transform-origin:left top;</p></div>
</body>
</html>
transform-style: flat | preserve-3d
嵌套元素是否显示3d效果
默认为flat，按照正常顺序排列，无3d效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:760px;
height:760px;
}
.container{
position: relative;
/*-webkit-transform-style:flat;
-moz-transform-style:flat;
-ms-transform-style:flat;
-o-transform-style:flat;
transform-style:flat;*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.pic, .inner, .middle, .outer{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.png) center no-repeat;
transform:rotateX(108deg);
}
.middle{
background:url(source/circle_middle.png) center no-repeat;
transform:rotateY(80deg);
}
.outer{
background:url(source/circle_outer.png) center no-repeat;
transform:rotateZ(70deg);
}
.pic{
background:url(source/pic.png) center no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
perspective:none | 数值
perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定
三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分
属性值为0或负值或none（none是默认值）时，没有透视效果
perspective-origin 透视中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:760px;
height:760px;
}
.container{
position: relative;
/*-webkit-transform-style:flat;
-moz-transform-style:flat;
-ms-transform-style:flat;
-o-transform-style:flat;
transform-style:flat;*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:500px;
-moz-perspective:500px;
-ms-perspective:500px;
-o-perspective:500px;
perspective:500px;
-webkit-perspective-origin:bottom;
-moz-perspective-origin:bottom;
-ms-perspective-origin:bottom;
-o-perspective-origin:bottom;
perspective-origin:bottom;
}
.pic, .inner, .middle, .outer{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.png) center no-repeat;
transform:rotateX(108deg);
}
.middle{
background:url(source/circle_middle.png) center no-repeat;
transform:rotateY(80deg);
}
.outer{
background:url(source/circle_outer.png) center no-repeat;
transform:rotateZ(70deg);
}
.pic{
background:url(source/pic.png) center no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
backface-visibility: visible | hidden;
背面是否可见
默认为可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
.container{
width:500px;
height:500px;
position: relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.box1, .box2{
width:100px;
height:100px;
border:1px solid;
margin:200px auto;
line-height: 100px;
text-align: center;
-webkit-transform:rotateX(137deg);
-moz-transform:rotateX(137deg);
-ms-transform:rotateX(137deg);
-o-transform:rotateX(137deg);
transform:rotateX(137deg);
}
.box1{
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
backface-visibility: visible;
}
.box2{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
css3元素如何扭曲、移位或旋转的更多相关文章
- 【Demo】CSS3元素旋转、缩放、移动或倾斜
CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- transform:rotate()将元素进行不同角度的旋转
通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...
- SDUT OJ 顺序表应用1：多余元素删除之移位算法
顺序表应用1:多余元素删除之移位算法 Time Limit: 1000 ms Memory Limit: 650 KiB Submit Statistic Discuss Problem Descri ...
- 环形文字 + css3制作图形 + animation无限正反旋转的一个小demo
少啰嗦,先看效果图: (注意文字和太极图均可旋转,太极图使用css写成的!) css: /*太极图css--*/ .Taiji { margin: 100px; width: 192px; heigh ...
- wap图片滚动特效_无css3 元素js脚本编写
手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- 转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 纯CSS3浮雕质感的立体文字旋转动画
还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...
- css3 移动端页面全屏旋转，横屏显示。
css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...
随机推荐
- SonarQube代码管理
一 搭建过程不详细说 二 配合jenkins使用,jenkins搭建过程这里不详细说 三 jenkins项目配置,需要安装sonarqube-jenkins插件 sonar.projectKey=a6 ...
- 乌班图14更新软件提示错误：https://mirrors.aliyun.com kubernetes-xenial InRelease: 由于没有公钥，无法验证下列签名： NO_PUBKEY 6A030B21BA07F4FB
提示如下 获取: https://mirrors.aliyun.com kubernetes-xenial InRelease 忽略 https://mirrors.aliyun.com kubern ...
- List容器排序方法的使用
今天在做任务的时候需要对已经存到list容器里的对象数组进行排序,需要根据 其中的一个属性进行排序,最初是根据一个利用冒泡排序的算法进行处理的后来上网查了一下对于list容器进行排序时有自带的方法.所 ...
- springboot使用servlet
基于注解方式: 基于配置类:
- MybatisDao
一.mybatisDao的编写(原始方式,不用) 1.接口编写 public interface UserDao { public void save(User user); public User ...
- 3、实战：OutOfMemoryError异常
目的:第一,通过代码验证Java虚拟机规范中描述的各个运行时区域存储的内容:第二,工作中遇到实际的内存溢出异常时,能根据异常的信息快速判断是哪个区域的内存溢出,知道什么样的代码可能会导致这些区域内存溢 ...
- Coroutine 预激装饰器
预激装饰器 讨论如何终止协程之前,我们要先谈谈如何启动协程.使用协程之前必须预激,可是这一 步容易忘记.为了避免忘记,可以在协程上使用一个特殊的装饰器.接下来介绍这样一个 装饰器. 预激协程的装饰器, ...
- Uncaught Error: Call to undefined function mcrypt_get_iv_size() 解决办法
函数 mcrypt_get_iv_size 在只在(PHP 4 >= 4.0.2, PHP 5, PHP 7 < 7.2.0, PECL mcrypt >= 1.0.0) 这几个版本 ...
- 一个基于图的数据管理系统-gStore
gStore是遵循 BSD协议的一个开源项目.一个基于图的 RDF 三元组存储的数据管理系统.该项目是北京大学.滑铁卢大学.香港科技大学的联合研究项目.中国北京大学计算机科学与技术研究所的数据库组对该 ...
- 珠峰-webpack1
#### sourcemap #### watch 选项 #### 3个常用的小插件. #### 前端webpack的自己的mock #### 服务端引用了webpack的插件. #### resol ...