CSS3 transform变换
CSS3 transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
举例:(翻面效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="data:images/location_bg.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>
CSS3 transform变换的更多相关文章
- CSS3☞transform变换
transform CSStransform属性允许你旋转,缩放,倾斜或平移给定元素.这是通过修改CSS视觉格式化模型的坐标空间来实现的. DEMO /* Keyword values */ tran ...
- 19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画
CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120 ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- 详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
随机推荐
- 出现“error c4430缺少类型说明符-假定为int。注意C++不支持默认int
出现这种错误的原因,是因为函数没有写返回值.是在VC6.0的工程转为高版本(VS2010)的时候经常出现的; #include <stdio.h> main() { printf(&quo ...
- 【bzoj1086】王室联邦
我以为树分块什么的必有高论,结果居然是个暴力…… 方法也很简单,我看下每个节点dfs的时候是否已经大于k个,大于的话我就新开一块. 注意dfs的时候当前节点不能放进子树的块中. #include< ...
- 只运行一个exe应用程序的使用案例
应用程序的exe启动设置 using System;using System.Diagnostics;using System.Reflection;using System.Runtime.Inte ...
- 【C++】复制构造函数
参考资料:黄邦勇帅(里面对于临时变量的说法我不是很理解,感觉里面的解释有问题) 用到复制构造函数的情况: 1.函数值传递 2.返回对象 3.用一个对象初始化另一个对象 重点注意下面两种情况: ① 只调 ...
- inside a shard
fsync sync fsync/syncsync is a standard system call in the Unix operating system, which commits to d ...
- 对json同属性字段压缩
function jsonPack(obj,ifOrder) { var result = [] // var nameArr = Object.keys(obj[0]); 非有序遍历 var nam ...
- Eclipse,myeclipse安装 配置Maven
本文转自http://www.cnblogs.com/timeng/archive/2013/05/07/maven_install.html myeclipse自带了maven插件,但是和原生插件还 ...
- String.Format,DateTime日期时间格式化
DateTime dt = DateTime.Now;//2010年10月4日 17点05分 string str = ""; //st ...
- 洛谷——P3152 正整数序列
P3152 正整数序列 题目描述 kkk制造了一个序列,这个序列里的数全是由正整数构成的.你别认为她的数列很神奇——其实就是1, 2, …, n而已.当然,n是给定的.kkk的同学lzn认为0是一个好 ...
- SPOJ PT07J - Query on a tree III(划分树)
PT07J - Query on a tree III #tree You are given a node-labeled rooted tree with n nodes. Define the ...