css3中transform的用法
transform:rotate旋转deg
#box1{
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}
transform:skew倾斜
#box2{
-moz-transform:skew(20deg);
-webkit-transform:skew(20deg);
}
transform:scale()放大
#box3{
-moz-transform:scale(2.0);
-webkit-transform:scale(2.0);
}
transform:translate位置偏移
#box4{
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
}
实例:
li img:hover {
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
-ms-transform:scale(1.05);
-o-transform:scale(1.05);
transform:scale(1.05)
}
css3中transform的用法的更多相关文章
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- 关于css3中transform的理解(只是改变状态未改变其真正的属性)
众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></d ...
- CSS3中transform属性的用法
有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source print? 01 &l ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- CSS3转换(transform)基本用法介绍
一个炫酷的网页离不开css的transform.transition.animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性. 一.功能 实现元 ...
- css3中webkit-box的用法(平分父元素)
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...
随机推荐
- 笔者的编辑语法:MarkDown
由于博客园里的文章有很多排版不好,一大堆文字堆在一块会影响到阅读. MarkDowm:百科 Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber).它允许人们“使用易读 ...
- web.xml文件报错:The processing instruction target matching "[xX][mM][lL]" is not allowed.
昨晚把我的项目上传到了gitlab,然后今天在公司从gitlab下载下来, 发现web.xml报错.
- [转载] vim带你装逼带你飞(一)
前言:逃离windows有很长时间了,特别是当今android盛行的时代,我们没有理由不选择ubuntu作为编译开发android之首选.其实操作系统只是我们使用的一个工具, windows也好lin ...
- PHP后门隐藏与维持技巧
在一个成功的测试后,通常会想让特权保持的更久些.留后门的工作就显得至关重要,通常布设的后门包括但不限于数据库权限,WEB权限,系统用户权限等等.此文则对大众后门隐藏的一些思路做科普. AD: 0×00 ...
- Hadoop 2.0 中的资源管理框架 - YARN(Yet Another Resource Negotiator)
1. Hadoop 2.0 中的资源管理 http://dongxicheng.org/mapreduce-nextgen/hadoop-1-and-2-resource-manage/ Hadoop ...
- ext3,ext4,xfs和btrfs文件系统性能对比
应为原文:http://www.ilsistemista.net/index.php/linux-a-unix/6-linux-filesystems-benchmarked-ext3-vs-ext4 ...
- 使用Ajax与服务器端通信
Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中 ...
- OpenCV的安装与系统环境变量
OpenCV的安装与系统环境变量 安装OpenCV本来是很简单的一件事,但配置却很麻烦.而且在配置过程中尤为重要的步骤就是系统环境变量的配置.我使用的是CodeBlick13.12与OpenCV1.0 ...
- UVALive 6269 Digital Clock --枚举,模拟
题意:说不清楚,自己看吧,太恶心. 这题真是SB了,当时看了一下以为乱搞就好了,于是开始动手拍,结果拍了好几个小时都没拍出来,而且越想越想不通,直接把自己绕进去了,结果gg了. 总结:甭管什么题,想清 ...
- HDU 2491 Priest John's Busiest Day
贪心.. #include<iostream> #include<string.h> #include<math.h> #include <stdio.h&g ...