CSS3 过渡、2D变形、3D变形 20160527

最新推荐文章于 2024-09-10 11:04:07 发布

陈奕然

最新推荐文章于 2024-09-10 11:04:07 发布

阅读量571

点赞数

分类专栏： CSS 文章标签： css3 css 动画

本文链接：https://blog.csdn.net/xiasheng30/article/details/51518295

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

transition

css3应用最广的属性
通过 CSS3的transition，
我们可以在不使用 Flash 动画或 JavaScript 的情况下，
当元素从一种样式变换为另一种样式时为元素添加效果。

要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-timing-function

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

2d变形

通过 CSS3 转换，我们能够对元素进行移动、转动、缩放、拉长或拉伸。

translate() 位移，移动
rotate() 旋转
scale() 缩放
skew() 变形

translate()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate()

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

skew()

skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

transform属性

transform-origin 允许你改变被转换元素的位置。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3d变形

transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

3d变形属性

每个属性多了一个Z，比如：
translateZ
rotateZ
scaleZ
skewZ
perspective:2000px 透视点
perspective-origin: 25% 75%;
transform-style: preserve-3d;该声明应用在3D变换的兄弟元素们的父元素上，
也就是舞台元素
backface-visibility:hidden;设置背景不可见

正方体范例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                margin: 0 auto;
                width: 300px;
                height: 300px;
                margin-top: 100px;
                position: relative;
                transform-style:preserve-3d;
            }

            .box:hover {
                -webkit-transform: rotateY(1000deg) rotateZ(1000deg);
                /*-webkit-transition-property: tramsform;*/
                -webkit-transition-duration: 10s;
            }

            .box img {
                width: 300px;
                height: 300px;
                position: absolute;
            }

            .box img:nth-child(1) {
                -webkit-transform: rotateX(90deg) translateZ(150px);
            }
            .box img:nth-child(2){
                -webkit-transform: rotateX(180deg) translateZ(150px);
            }
            .box img:nth-child(3){
                -webkit-transform: rotateX(-90deg) translateZ(150px);
            }
            .box img:nth-child(4){
                -webkit-transform: translateZ(150px);
            }
            .box img:nth-child(5){
                -webkit-transform: rotateY(90deg) translateZ(150px);
            }
            .box img:nth-child(6){
                -webkit-transform: rotateY(-90deg) translateZ(150px);
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <div class="box">
                <img src="img/0a6a9c4543a982266570595d8982b9014b90eb42.jpg" />
                <img src="img/111922261240.jpg" />
                <img src="img/1119224I327.jpg" />
                <img src="img/11192350FI.jpg" />
                <img src="img/200622767320.jpg" />
                <img src="img/u=534790948,3017310551&fm=21&gp=0.jpg" />
            </div>
        </div>
    </body>

</html>

螺旋体范例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .warp {
                width: 200px;
                margin: 0 auto;
                transform-style: preserve-3d;
                position: relative;
            }

            .warp:hover {
                transform: rotateY(10000deg);
                transition: 100s;
            }

            .redball {
                background-color: red;
                height: 50px;
                width: 50px;
                border-radius: 25px;
                position: absolute;
            }

            .redball:nth-child(1) {
                left: 75px;
                transform: translateZ(100px);
            }

            .redball:nth-child(2) {
                left: 75px;
                top: 16px;
                transform: rotateY(36deg) translateZ(100px);
            }

            .redball:nth-child(3) {
                left: 75px;
                top: 32px;
                transform: rotateY(72deg) translateZ(100px);
            }
            .redball:nth-child(4) {
                left: 75px;
                top: 48px;
                transform: rotateY(108deg) translateZ(100px);
            }
            .redball:nth-child(5) {
                left: 75px;
                top: 64px;
                transform: rotateY(144deg) translateZ(100px);
            }
            .redball:nth-child(6) {
                left: 75px;
                top: 80px;
                transform: rotateY(180deg) translateZ(100px);
            }
            .redball:nth-child(7) {
                left: 75px;
                top: 96px;
                transform: rotateY(216deg) translateZ(100px);
            }
            .redball:nth-child(8) {
                left: 75px;
                top: 112px;
                transform: rotateY(258deg) translateZ(100px);
            }
            .redball:nth-child(9) {
                left: 75px;
                top: 128px;
                transform: rotateY(294deg) translateZ(100px);
            }
            .redball:nth-child(10) {
                left: 75px;
                top: 144px;
                transform: rotateY(330deg) translateZ(100px);
            }
            .redball:nth-child(11) {
                left: 75px;
                top: 160px;
                transform:translateZ(100px);
            }

            .redball:nth-child(12) {
                left: 75px;
                top: 176px;
                transform: rotateY(36deg) translateZ(100px);
            }


            .redball:nth-child(13) {
                left: 75px;
                top: 192px;
                transform: rotateY(72deg) translateZ(100px);
            }
            .redball:nth-child(14) {
                left: 75px;
                top: 208px;
                transform: rotateY(108deg) translateZ(100px);
            }
            .redball:nth-child(15) {
                left: 75px;
                top: 224px;
                transform: rotateY(144deg) translateZ(100px);
            }
            .redball:nth-child(16) {
                left: 75px;
                top: 240px;
                transform: rotateY(180deg) translateZ(100px);
            }
            .redball:nth-child(17) {
                left: 75px;
                top: 256px;
                transform: rotateY(216deg) translateZ(100px);
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
            <div class="redball"></div>
        </div>
    </body>

</html>