CSS 3D旋转例子

作者: 白雪公主960 | 来源:发表于2018-08-01 16:45 被阅读26次

CSS 3D旋转例子
纯css3实现旋转3D立方体骰子
大牛带你玩转 CSS3 3D 技术
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
梯形标签页
CSS3的3D变换
CSS3 3D导航和正方体旋转
css实现简单的3D效果
CSS（二）
CSS3新特性

html中

<div id="parent">
    <div id="son">3D转换元素</div>
</div>

CSS中

#parent{
    width:400px;
    height:400px;
    border:1px solid #000;
    margin:100px auto;

    /*增加空间距离*/
    perspective:1000px;
    -webkit-perspective:1000px;
}
#son{
    width:200px;
    height:200px;
    background:red;
    margin:100px auto;
}

绕x轴(烤羊腿方向顺时针)转45度，代码如下

#son{
    transform:rotatex(45deg);
}

绕x轴，y轴，z轴旋转45度，坐标轴会变动

#son{
    transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);
}

绕x轴，y轴，z轴旋转45度，注意写法不同，坐标轴不动

#son{
    transform:rotate3d(1,1,1,45deg);
}

CSS 3D旋转例子
html中 CSS中绕x轴(烤羊腿方向顺时针)转45度，代码如下绕x轴，y轴，z轴旋转45度，坐标轴会变动绕...
纯css3实现旋转3D立方体骰子
纯css3实现旋转3D立方体骰子（自旋转型）主要运用css3的transform，rotate，translat...
大牛带你玩转 CSS3 3D 技术
css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotat...
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性：...
梯形标签页
梯形是用CSS难以生成的形状，使用伪元素可行，但不灵活。Sooooooooo,我们可以使用CSS中的3D旋转（由于...
CSS3的3D变换
CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转 ( rotate ) 、扭曲 ( skew ) 、...
CSS3 3D导航和正方体旋转
一、3D导航条二、3D旋转正方体附上源码： CSS3的 @keyframes 用法详解:此属性与 animat...
css实现简单的3D效果
css实现简单3D房间效果纯3D效果实现上述效果，总体思路就是旋转容器，为容器贴纸。这是一个简单的3D立方体空...
CSS（二）
css3动画 2D,3D转换方法 translate（）向x,y轴移动 rotate（）旋转180度 scale（...
CSS3新特性
写出如下 CSS3效果的简单事例 demo 圆角，圆形 div 阴影 2D 转换：放大、缩小、偏移、旋转 3D ...