3D转换transform

rotateX() 方法

rotateX()方法,围绕其在一个给定度数X轴旋转的元素。

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY() 方法

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

转换属性

下表列出了所有的转换属性:

3D 转换方法

【Demo】CSS3 3D转换的更多相关文章

  1. CSS3 3D转换

    CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform           IE10和Firefox支 ...

  2. CSS3 3D 转换

    CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() rotateX() 方法 rotateX()方法,围绕其在 ...

  3. CSS3 3D转换——rotateX(),rotateY(),rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  4. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  5. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  6. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  7. CSS3 基本属性 浅析(含选择器、背景阴影、3D转换、动画等)

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  9. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

随机推荐

  1. XSS CSS Cross SiteScript 跨站脚本攻击

    XSS攻击及防御 - 高爽|Coder - CSDN博客 https://blog.csdn.net/ghsau/article/details/17027893 XSS又称CSS,全称Cross S ...

  2. DOM 综合练习(二)

    // 需求一: 二级联动菜单 <html> <head> <style type="text/css"> select{ width:100px ...

  3. springmvc控制器controller单例问题

    springmvc controller默认的是单例singleton的,具体可以查看注解scope可以一目了然. 单例的原因有二: 1.为了性能. 2.不需要多例. 1.这个不用废话了,单例不用每次 ...

  4. travelsal all files in a dir using recursion shell

    #!/bin/bash function getdir(){ ` do dir_or_file=$"/"$element if [ -d $dir_or_file ] then g ...

  5. php 获取各类时间归类

    //php获取今日开始时间戳和结束时间戳 $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime(0,0,0 ...

  6. webdriver的API

    基本API 1.页面刷新    driver.fresh() 2.页面切换   driver.back().  driver.forward() 3.设置窗口大小    driver.set_wind ...

  7. Config Static IP Address manually in Ubuntu

    The process of the configuration of static IP address in Ubuntu is as follows: ``` $ sudo vim /etc/n ...

  8. 主机名 域名 网站名 URL

    举几个域名的例子:google.com,baidu.com,163.com可以明确的告诉你,加上www,就不再是域名了! 以http://mail.163.com/index.html为例进行说明:1 ...

  9. c++ ScopeExitGuard

    说到Native Languages就不得不说资源管理,因为资源管理向来都是Native Languages的一个大问题,其中内存管理又是资源当中的一个大问题,由于堆内存需要手动分配和释放,所以必须确 ...

  10. beego——模型(model)

    beego ORM是一个强大的Go语言ORM框架.她的灵感主要来自Django ORM和SQLAlchemy. 已经支持的数据库驱动: MySQL:https://github.com/go-sql- ...