<div class="user-list-title">标准点播-<small>体验版</small>
<img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userCenter/jiantoublue1.png" class="
user-arrow
">
2.css 内容
.user-arrow{//这是箭头的样式
width:12px;
right:26px;
margin-top: 8px;
cursor:pointer;
display:inline-block;//放箭头的标签一定是块级元素
.rotate{
transform-origin:center center; //旋转中心要是正中间 才行
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s; //过度时间 可调
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
.rotate1{
transform-origin:center center;
transform: rotate(0deg); //返回原点
-webkit-transform: rotate(0deg);
-moz-transform: rotate(deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
3.jq 处理方法
$(function() {
var usercenter = {
init:function(){
this.modal();
modal: function() {
$(".user-arrow").click(function(){
if($(this).hasClass("rotate")){ //点击箭头旋转180度
$(this).removeClass("rotate");
$(this).addClass("rotate1");
}else{
$(this).removeClass("rotate1"); //再次点击箭头回来
$(this).addClass("rotate");
usercenter.init();
1. 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转，怎么实现呢,需要css3搭配jq 来处理 如图：2.html标准点播-体验版 user-arrow">3.css .user-arrow{//这是箭头的样式 width:12px;right:26px;
这里是实现效果,画出效果,具体可调
代码实现添加一个UIImage的分类 ,在分类中写如下代码+ (UIImage *)triangleImageWithSize:(CGSize)size tintColor:(UIColor *)tintColor{
UIGraphicsBeginImageContextWithOptio
这是一个图片效果，很简单实用，只需要一个"rotate3Di.js"的插件就行，
关于rotate的用法有如下几种：
$(选择器).rotate3Di(30); //把图片3D
旋转
30
度
$(选择器).rotate3Di(
180
, 1000);//经过1s把图片3D顺时针
旋转
180
度
$(选择器).rotate3Di('-=
180
', 1000);//每过1s把图片3D逆时针
旋转
18...
html代码：
&lt;img src="${request.contextPath}/images/rotate.svg" id="rotate_img" onclick="rotateImg('rotate_img');return false;"&gt;
方法
一：使用
jq
的
方法
旋转
图片
function rotateImg(imgId){
var ima
使用transition和transform:rotate(）来实现
点击
箭头让他转动一定的角
度
。 <i class="fas fa-chevron-right setfont right1" ></i> .right1{
margin-right: 0px;
margin-left: 37px;
transition: all 0.3s ease...
首先，我们先完成二级菜单。二级菜单用
jQ
uery很容易便可以实现。
先来看看
jQ
uery代码，其中注释是我刚刚添上去的，希望能帮助大家理解：
$(document).ready(function(){
// 二级导航的展开与收缩
问题： 我们经常会遇见
点击
一个小
三角
使之
丝滑
的
旋转
180
度
上下
旋转
，怎么实现呢,需要
css3
搭配
jq
来
处理
如图：1.
点击
前 2.
点击
后（效果
丝滑
旋转
）
1.html 页面内容
<div class="user-list-title">标准点播-<small>体验版</small>
<img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userC...
Vector3 originalVector = new Vector3(1, 0, 0); // 这是原来的向量
float angle = 30f; // 这是
旋转
的角
度
// 计算新向量的 x 坐标
float newX = originalVector.x * Mathf.Cos(angle) - originalVector.y * Mathf.Sin(angle);
// 计算新向量的 y 坐标
float newY = originalVector.x * Mathf.Sin(angle) + originalVector.y * Mathf.Cos(angle);
// 创建新向量
Vector3 rotatedVector = new Vector3(newX, newY, 0);
请注意，上面的代码仅
旋转
了原来向量的 x 和 y 坐标，因此它仅适用于 2D 向量。如果要
旋转
3D 向量，可以使用更复杂的数学
方法
。
