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的手势方向没有变,依旧是原来方向,若有相关插 ...
随机推荐
- Ubuntu 入门笔记（1）
在阿里云上申请了一个云服务器,开始学习Linux.我选择的是Ubuntu 14.04 ,在登录时就绕了我好长时间,输入用户名是有显示的,但是输入密码就没有反应了,查找了之后才发现原来这是Ubuntu ...
- 【Nginx入门系列】第二章 外部无法访问Nginx服务器
问题 Nginx服务器已经搭建成功,并且已经启动(如下图所示),并且可以ping通nginx服务器的ip地址,但是外部机子无法访问 Nginx服务器(没法显示欢迎页面) 解决方案 一般这种情况是出现在 ...
- AWS 入门使用
AWS官方参考文档:https://docs.aws.amazon.com/s3/index.html AWS基本介绍:https://docs.aws.amazon.com/zh_cn/Amazon ...
- 批量解析域名为IP地址的python脚本
脚本如下: #!/usr/bin/env python #coding:utf- import os,sys from socket import gethostbyname DOMAIN= &quo ...
- RestTemplate远程调用方法
概述: spring框架提供的RestTemplate类可用于在应用中调用rest服务,它简化了与http服务的通信方式,统一了RESTful的标准,封装了http链接, 我们只需要传入url及返回值 ...
- selenium 调用JavaScript代码
selenium 调用JavaScript代码 调用JavaScript方法有两种: execute_script(): 方法解释:是同步方法,用它执行js代码会阻塞主线程执行,直到js代码执行完毕. ...
- num14---享元模式
案例:
- 前端jQuery日历控件报错 $("#datepicker").datepicker is not a function
使用日历控件时,前端产生错误: $("#datepicker").datepicker is not a function 问题原因 前端在同一个页面,jQuery引入了两次. 解 ...
- qt creator源码全方面分析(2-3-2)
目录 Showing Task List Files in Issues Pane 管理任务列表条目 任务列表文件格式 Showing Task List Files in Issues Pane 您 ...
- 《算法导论》第二章demo代码实现（Java版）
<算法导论>第二章demo代码实现(Java版) 前言 表示晚上心里有些不宁静,所以就写一篇博客,来缓缓.囧 拜读<算法导论>这样的神作,当然要做一些练习啦.除了练习题与思考题 ...