5.5 CSS3 transform变换

zengni 2020-02-23

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="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>
zengni

zengni

相关推荐

怎么让Chrome支持小于12px 的文字？

往往设计师回来找我们，这个字体能小一些吗？其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？针对谷歌浏览器内核，加webkit前缀，用transform:scale

sunshineboyleng / 0评论 2020-07-08

CSS通过text-transform实现大写、小写和首字母大写转换

再日常项目中可能会用到一些特殊的样式，比如大写字母转小写、小写字母转大写、首字母大写等。none带有小写字母和大写字母的标准的文本。inherit从父元素继承。

impress / 0评论 2020-05-11

CSS变形、动画实现的旋转魔方

<!DOCTYPE html>. height: 100vh;width: 100vw;/* background-image: url(../img/rubick.jpeg); */. margin: 0;paddin

yaodilu / 0评论 2020-04-30

bootstrap div垂直居中+水平居中保持响应式

/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->

Phoebe的学习天地 / 0评论 2020-04-14

css 变形（transform）

<!DOCTYPE html>. width: 200px;height: 200px;background-color: #bfa;transition: all .2s;transform: translateX(50%);width: 2

福叔 / 0评论 2020-04-11

2D and 3D

translate值是从左边元素移动50个像素，并从顶部移动100像素。transform:skew;分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。transform:matrix; matrix 方法有六个

zjuwangleicn / 0评论 2020-03-08

CSS3动画属性有哪些

在平面内进行旋转：transform:rotate value值是以角度为单位，例如30deg.vlaue值1：绕着X轴旋转的角度，value值2：绕着Y轴旋转的角度。参数的设置是逆时针为正值，顺时针为负值。在平面内进行缩放：tansform:scale

冰蝶 / 0评论 2020-03-01

css3的动画属性

　　　　检索或设置对象中的参与过渡的属性。　　　　transition:属性值1 属性值2 属性值3 属性值4；　　　　　　能支持过渡的属性都会被选中进行过渡变换。　　　　属性值4：动画的类型（匀速/linear 匀加速 匀减速 先加速后减速 贝塞尔曲线

somboy / 0评论 2020-02-29

CSS3 制作立方体（个人疑惑点解读）

#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;#box ul li{ width:100%; height: 100%; position: absol

wangjie / 0评论 2020-02-22

不使用字体图标和图片，只使用css如何做出展开收起的效果

transition: background 0.3s cubic-bezier, transform 0.3s cubic-bezier, top 0.3s cubic-bezier;

tianzyc / 0评论 2020-02-19

css 纯css轮播图 示例

<canvas id = "canvasId" width = 500 height = 500></canvas>. <script type = "text/javascript"

冰蝶 / 0评论 2020-02-16

有关css编写文字动态下划线

background-color:#000; //这里颜色可以自己设定，也可以设置继承和文字一样的颜色。transform-origin:left bottom; //这个属性必须要在transform之后，他定义的是一个基点，具体的需要自己百度去看一看

lanzhusiyu / 0评论 2020-02-03

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动、缩放、旋转、倾斜 。transform: translate; /* 水平向右移动50px 和 垂直向下移动60px*/. Px为负值,那就变成向左 或者 向上。说明 scale默认值为1,

lanzhusiyu / 0评论 2020-01-12

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动、缩放、旋转、倾斜 。transform: translate; /* 水平向右移动50px 和 垂直向下移动60px*/. Px为负值,那就变成向左 或者 向上。说明 scale默认值为1,

MaureenChen / 0评论 2020-01-01

好吧，CSS3 3D transform变换，不过如此！

早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！最近折腾iP

jiedinghui / 0评论 2019-12-27

css样式书写顺序

css3中新增属性：content box-shadow border-radius animation transform……

wangjie / 0评论 2019-12-24

css应用视觉设计

HTML元素的背景色并不局限于单色。css还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：。第一个参数指定了颜色过渡的方向-它的值是角度，90deg代表垂直渐变，45deg的

zhanghao / 0评论 2019-12-20

研究一个动画相册送给女朋友吧

margin:0;padding:0;max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-a

bertzhang / 0评论 2019-12-14

css学习4

{transform:skew;} 在x轴和y轴分别倾斜度数，元素在X轴和Y轴上倾斜20度30度，注意，前面是y轴。{transform:matrix;} 6个参数，分别是旋转，缩放，移动和倾斜。利用matrix()方法旋转div元素30°。平移只有跟e和

impress / 0评论 2019-12-13

ionic实现带字的toggle滑动组件

在网上找了下其他的实现，感觉没得类似的，也没发现合适的，于是自己试着定义了一个凑合着用。看效果图边缘有模糊锯齿现象，可能是由于像素的影响，在android和ios手机上表现非常流畅。其实实现起来也很简单，主要是算好滑块的位置，滑动用的是css的transf

ZillahV0 / 0评论 2016-08-27

CSS新特性之2D转换transform

/*transform: translate;仅垂直方向移动100px但是x方向的0不可以省略*/. 之前学过几种移动盒子的位置的方法：定位、盒子外边距。现在又有一种新的方法就是translate,translate最大的优点就是不会影响到其他元素的位置。

CaiKanXP / 0评论 2019-12-02

如何使用 css3 transform 属性来变换背景图

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。这个听起来很赞。目前 W3C 没有关于如何旋转背景图的提案。幸运的是，我们找到一个解决方式。这个元素可以使用任何样式，但一定

AlisaClass / 0评论 2019-11-18

Transform（CSS动态属性的开始）

基本概念：transform 属性向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。这两点是Transform的概念和应用场景，重点在于2D和3D的转换，那么呢？2D和3D的转换是有一定的数学基础的，为什么这么说呢？从某一点

qianxiaona / 0评论 2019-11-16

vue初始化动画加载的实例

--浏览器兼容模式用最新的文档渲染模式-->. -- built files will be auto injected -->

apolluo / 0评论 2018-09-01

前端深入之css篇丨2020年前，彻底掌握css动画【transform】

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？前面几篇文章我们已经一起学习了animation和transition 的使用，如果有不了解的同学可以查看我的之前的文章。今天我们终于开始学习transform和translate了，其实tra

lanzhusiyu / 0评论 2019-10-30

10个让你受益匪浅的css使用技巧

例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。出现了重叠的bug：。父级，任意父级，非body级别，设置overf

安辉 / 0评论 2019-10-30

10个让你受益匪浅的css使用技巧

例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。出现了重叠的bug：。父级，任意父级，非body级别，设置overf

waterv / 0评论 2019-10-30

css显示英文大小写

text-transform: capitalize;强制所有字符被转换为大写。text-transform: none;想到最开始的时候还一个个找那些单词首字母有没有的日子，突然一阵心酸，哈哈哈

zengni / 0评论 2019-10-29

css3 新特性（translate 移动，rotate 旋转 ， scale 缩放）

　可以改变元素在页面中的位置，类似定位。　　translate 中的百分比单位是相对自身元素的translate:;　2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。　　还可以给 x y 设置 像素 或者 方位名词。　缩放，顾名思义，可以放大和缩

zengni / 0评论 2019-10-27

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？值此1024程序员佳节之际，我特此推出供同学们学习的动画小案例，这个案例非常简单，但是他可有帮我们巩固上一篇学的animation，并且能够让你对后面要学习的animation有一个基本的认识。

MaureenChen / 0评论 2019-10-25

如何使用CSS来修改SVG原点和制作SVG动画

SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之

purecss / 0评论 2015-07-22

css3 transform 3d详解

transform2d的教程网上有很多，但是3d的还是比较少，关于透视研究了很长时间才算是了解，下面详细的解释一下transform中3d变形的原理。让我们来看一下transform-style这个属性，这个属性一定是应用在父元素上的，它有两个值prese

懵懂听风雨 / 0评论 2015-11-12

CSS3实现的线框球形旋转效果

body {padding:0;margin:0;background:#333;position:relative;}. .ball {height:500px;width:500px;position:absolute;top:50%;left:50%

沈宫新 / 0评论 2018-02-05

使用CSS实现文字3d浮动效果

<!DOCTYPE html>. family=Open+Sans:600);background: #081625;font-family: "Open Sans", sans-serif;font-weight: 600

web开发 / 0评论 2018-02-05

CSS3 transform 属性

兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51. transform的含义是：改变，使…CSS3 transform都有哪些常用属性？transfor

lanzhusiyu / 0评论 2018-01-05

移动常见疑难问题

平时的开发过程中，经常会遇到一些疑难杂症，在这里记录一下常用的解决方案。因此在IOS的系统中，0.5px是可以实现的。click是在touch系列事件发生后大约300ms才触发的，混用touch和click就会导致点透问题。尝试 input 元素的 scr

whale / 0评论 2019-09-07

CSS3旋转与大小渐变

DOCTYPE html><html><head><meta charset="utf-8"> <title>旋转渐变</title><style> div

走向WEB开发 / 0评论 2017-09-18

CSS3实现的线框球形旋转效果

①class为y的类需要进行X轴旋转后才可以显现；.ball div {width:100%;height:100%;border-radius:100%;border:solid 1px #fff;position:absolute;top:50%;le

走向WEB开发 / 0评论 2018-02-18

CSS实现小球跳动效果

animation-duration: 1s;animation-duration: .75s;animation-duration: .25s;top: 100%;height: 50%;width: 50%;background-color: #fff

yongquanx / 0评论 2018-02-17

CSS3中transform中的matrix（）矩阵笔录

旋转z轴θ度x轴最后会与原点偏移,X轴上的点[x,0,0]的坐标都会变成 [cosθx,sinθx,0]

魄竹 / 0评论 2018-02-13

CSS实现按钮开门效果

transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out;

Dorissun / 0评论 2018-02-20

CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

但是这也带来了副作用。我猜想这是和Chrome用的渲染引擎的工作方式有关，具体为什么，有空再详细研究吧。

wcssdu / 0评论 2019-07-01

纯css实现叉号

position: absolute;right: 32px;top: 32px;width: 32px;height: 32px;position: absolute;left: 15px;content: ' ';height: 33px;width:

yongquanx / 0评论 2019-07-01

基础知识：css3核心知识整理

css3前缀根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8. // -ms-animation（动画 ）transform（转换）。transform: scale; // 缩放：

yaodilu / 0评论 2019-06-30

css3实现元素环绕中心点布局

/* rotateZ控制方向，每个元素旋转30度，12个元素刚好360度。translateY控制每个元素距中心点的距离 */

覆雪蓝枫 / 0评论 2019-06-30

CSS之如何绘制任意角度的扇形

扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果</pre><html>. <style> .shanxing{ position: relative; w

yaodilu / 0评论 2019-06-29

css3属性transform-origin属性讲解

而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况

qiupu / 0评论 2019-06-29

jquery的animate无法支持transform属性的解决方案

今天有个同事问了道问题，jquery的动画想实现转换类效果，发现无效。。。}) 在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用。注意：该方法只支持rotate的2D旋转，无法实现rotateX、rotateY、rotat

84483065 / 0评论 2019-03-25

CSS实现按钮开门效果

transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out;-webkit-transition: opacity 0s 1.42s ease-out,

liusure0 / 0评论 2018-02-20