css动画 transform 的旋转应用示例

属性； rolateX rolateY rolateZ 三个方向的旋转方向及角度

rolateX rolateZ 从正斜上方查看可以理解为顺时针旋转；

rolateY 从正斜上方查看可以理解为逆时针

借鉴如下如

源码demo

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateX(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}#div3
{
padding: 80px 60px 20px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-40deg);}
</style>
</head><body><div id="div1"><div id="div2">HELLO方片<div id="div3">YELLOW方片</div></div>
</div></body>
</html>

运行效果图：

css动画 transform 的旋转应用示例相关推荐

纯CSS动画流星自旋转
纯CSS动画特效流星外部CSS部分 /* body {background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%) ...
css动画实现转盘旋转,1.使用css3实现大转盘
先上效果图,如图所示: 最终效果第一步:画个父容器+12个子容器(扇叶) 将父容器居中,子容器使用absolute定位,基本代码如下:html> body { d ...
01.CSS动画--transform
transform: translate(参数1,参数2):让元素在X轴与Y轴方向发生偏移-->参数1:X:参数2:Y rotate(参数1):让元素进行旋转:单位(deg) scale(参数1 ...
14（高级）CSS动画之：旋转星球
方法: #earth{ width: 800px; height: 800px; clear: both; background:url("earth.png ...
css如何旋转图片吗,css如何让图片旋转
css让图片旋转的方法:首先创建一个HTML示例文件:然后通过img标签引入图片:最后通过给img图片添加transform和animation样式属性来实现图片旋转效果即可. 本文操作环境:wind ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
css 跳跃动画,CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...

css动画 transform 的旋转应用示例

css动画 transform 的旋转应用示例相关推荐

最新文章

热门文章

css动画 transform 的旋转 应用示例

css动画 transform 的旋转 应用示例相关推荐

最新文章

热门文章

css动画 transform 的旋转应用示例

css动画 transform 的旋转应用示例相关推荐