2D变形transform的translate和rotate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform的 translate和rotate</title>
<style type="text/css">
#div1{
height:200px;
width: 200px;
border:1px solid;
transform: translate(100px,100px);
}
#div2{
height: 100px;
width: 100px;
background: yellow;
border:1px solid;
transform: rotate(35deg);
padding: 10px;
transform-origin: % %;
} </style>
</head>
<body>
<div id="div1">
<div id="div2">Hello</div>
</div>
</body>
</html>
2D变形transform的translate和rotate的更多相关文章
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...
- 深入理解CSS变形transform(2d)
× 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...
- CSS变形transform(2d)
前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- css3的2D变形
一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...
随机推荐
- Asp.net Core 微信公众号开发系列
参考:http://www.cnblogs.com/zskbll/p/4074855.html 一.微信公众平台操作流程 1.先到微信公众平台注册账号 2.登录成功后找到开发-->开发者工具-- ...
- django新手第一课
django是基于python的一个web框架,大致结构如下: 在pycharm,python2.7,django1.8,mysql都装好的情况下,现在开始django的初试: 一.基础启动djang ...
- PHP中::的使用
访问静态变量,静态属性,const修饰的变量.
- 修改maven项目jdk版本,并解决Dynamic Web Module 3.1 requires Java 1.7 or newer错误
使用maven的时候,默认会使用1.5版本的JDK,并且创建项目时也会是1.5版本. 但是我想用JDK1.7版本,所以我手动将maven项目JDK改为1.7版本. 手动修改JDK版本为1.7以后,项目 ...
- vue项目中遇到的问题
在 export defaul new Router({ )} 这个路由配置中一定要加mode : 'history' 否者就会在路由前面默认添加# 路由跳转的几种方式: 在VUE中使用less来编译 ...
- C语言拼接字符串以及进制转换
#include<stdio.h> #include<stdlib.h> #include<string.h> char *join1(char *, char*) ...
- Davinci DM6446 Codec Engine双核通信环境的搭建
根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...
- Servlet.service() for Servlet jsp threw exception javax.servlet.ServletException:File "/pageFoo
1.错误描述 Servlet.service() for Servlet jsp threw exception javax.servlet.ServletException:File "/ ...
- 解析Java中的String、StringBuilder、StringBuffer类（一）
引言 String 类及其相关的StringBuilder.StringBuffer 类在 Java 中的使用相当的多,在各个公司的面试中也是必不可少的.因此,在本周,我打算花费一些时间来认真的研读一 ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...