首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常。2.perspective-origin,透视点一般居于容器的中心。3.transform-style:
preserve-3d,声明容器内的环境是3D环境,其内容可以以3D效果显示,就是每一个具体的内容都有X,Y,Z轴。如下
<div class="con" id="con">
<img id="img1" src="../img/greengirl.jpg" alt="">
<img id="img2" src="../img/ccce6e770d1edb6035c63fef7c0cc136.jpg" alt="">
<img id="img3" src="../img/flower.jpg" alt="">
<img id="img4" src="../img/mm.jpg" alt="">
</div>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
.con{
position: relative;
perspective: 2000000px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
要设置为相对定位,因为他的内容要设置为绝对定位,重合在一起,然后再设置它们各自的旋转角度和偏移的位移。/*每张图片绕着自身的x或y轴转后,图片自身的Z轴也会跟着旋转,绕X往后的度数为正值,绕Y轴往右的度数为正,向Z轴平移量为图片宽度的一半*/
#img1{transform:rotateX(0deg) translateZ(200px);}前
#img2{transform:rotateX(0deg) translateZ(-200px);}后
#img3{transform:rotateY(90deg) translateZ(-200px);}左
#img4{transform:rotateY(90deg) translateZ(200px);}右

css3旋转的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  4. CSS3 旋转 太阳系

    参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式  一种是使用 transform-origin  另一种是tran ...

  5. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  6. CSS3旋转缩放移动倾斜等效果——transform

    1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...

  7. css3旋转、过渡、动画属性

    1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...

  8. css3旋转立方体-_-

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Asp.NET Visible属性与HTML display:none

    作为Asp.NET 程序猿,我们经常会遇到客户端HTML 元素与 WebPage Server端控件互操作的情景.如果没有很好的掌握两种技术的细节就很容易发生一些“莫名其妙的错误”. 我最近犯的一个错 ...

  2. typedef与#define的区别

    1.  typedef typedef故名思意就是类型定义的意思,但是它并不是定义一个新的类型而是给已有的类型起一个别名,在这一点上与引用的含义类似,引用是变量或对象的别名,而typedef定义的是类 ...

  3. mybatis入门_mybatis基本原理以及入门程序

    一.传统jdbc存在的问题 1.创建数据库的连接存在大量的硬编码, 2.执行statement时存在硬编码. 3.频繁的开启和关闭数据库连接,会严重影响数据库的性能,浪费数据库的资源. 4.存在大量的 ...

  4. 《CSS权威指南》读书笔记

    一.css和文档层叠 css规定了冲突规则,这些规则统称为层叠.这些规则定义了样式发生冲突时以优先级高的为准. 常用的优先级判定: 1. 开发者样式>读者样式>浏览器样式(除非使用!imp ...

  5. PHP function

  6. 贪婪 vs 不贪婪

    当重复一个正则表达式时,如用 a*,操作结果是尽可能多地匹配模式.当你试着匹配一对对称的定界符,如 HTML 标志中的尖括号时这个事实经常困扰你.匹配单个 HTML 标志的模式不能正常工作,因为 .* ...

  7. [第一个自己做的C小程序]丧失求生文字小游戏

    丧失求生文字小游戏 编写原因: 我编写这个小程序是为了结合下我学习的知识并且做一个小游戏来看看我自己的能力,目前我已经学完了C语言的编程基础.马上就要学到指针,这个就是我的基础总结项目,希望大家可以都 ...

  8. autobench 测试笔记

    yum install texinfo yum install gnuplot #下载 http://httperf.googlecode.com/files/httperf-0.9.0.tar.gz ...

  9. C# Out,Ref 学习总结

    C# Out,Ref 学习总结. ref是传递参数的地址,out是返回值,两者有一定的相同之处,不过也有不同点. 使用ref前必须对变量赋值,out不用. out的函数会清空变量,即使变量已经赋值也不 ...

  10. eclipse运行项目发生Unsupported major.minor version 52.0错误

    编程的世界错误多啊 各种乱七八糟的异常数不清啊 嘿嘿呦!!! 今天又碰到莫名奇妙的问题了:eclipse中原来的项目运行的好好的,前几天想学AndroidStudio于是就装了,为了节省硬盘空间节间, ...